看到张戈博客的来路提醒小窗口功能很好玩,所以自己利用Notification和layui的提示窗口写了一个来路提醒的小窗。
具体效果如下:
如果桌面浏览器不允许Notification通知权限或者不支持Notification就会使用layerui(什么是Notification?)
当桌面浏览器允许Notification通知权限后就会使用Notification
下面是源码
<?php /** * 获取网站来路并分析 * @author Youngxj <blog@youngxj.cn> * @time 2018年6月27日 * @param string $referers 自定义ua * @return strting/bool 输出获取到的来路 */ function get_referer($referers=''){ // 更改为自己的网址 // 避免来路重复 $localhost = 'blog.youngxj.cn'; /*获取网站来路*/ $referer = $referers ? $referers : $_SERVER['HTTP_REFERER']; if(!$referer){ return false; } /*获取网站host*/ $str = parse_url($referer); if (!$str['host']||$str['host']==$localhost) { return false; } $url = $str['host']; /*关键词判断类型*/ if(strpos($url,'baidu') !== false){ $url_str = '百度搜索'; }elseif (strpos($url,'sogou') !== false) { $url_str = '搜狗搜索'; }elseif (strpos($url,'sm') !== false) { $url_str = '神马搜索'; }elseif (strpos($url,'bing') !== false) { $url_str = '必应搜索'; }elseif (strpos($url,'google') !== false) { $url_str = '谷歌搜索'; }elseif (strpos($url,'so') !== false) { $url_str = '360搜索'; }elseif (strpos($url,'easou') !== false) { $url_str = '宜搜搜索'; }elseif (strpos($url,'yahoo') !== false) { $url_str = '雅虎搜索'; }else{ /*如果以上都找不到则使用来路域名并截取字数*/ if (strlen($url)>5) $url_str=substr($url,0,10) . '...'; } return $url_str; } ?> <script src="layui/layui.js"></script> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <?php if(get_referer()){?> <script> var popNotice = function() { //获取用户授权状态 if (Notification.permission == "granted") { var notification = new Notification("欢迎来自<?php echo get_referer();?>的朋友", { //很明显这是正文 body: '若当前文章未能解决您的问题,您可以先尝试站内搜索,当然也可以给我留言喔(^_^)!', //很明显这是图标 icon: 'https://ww2.sinaimg.cn/large/005BYqpgly1fsnpxsctd7j305k05kwec.jpg' }); //消息被点击事件 notification.onclick = function() { /*window.open("<?php echo $_SERVER['HTTP_REFERER'];?>");*/ }; //消息被关闭事件 notification.onclose = function() { notification.close(); }; //消息出现错误事件 notification.onerror = function() { alert('上帝也不知道发生了什么'); notification.close(); }; } }; if (window.Notification) { if (Notification.permission == "granted") { popNotice(); }else if( Notification.permission != "denied"){ Notification.requestPermission(function (permission) { popNotice(); }); } } else { echo_layer(); } function echo_layer(){ layui.define(['layer', 'form'], function(exports){ var layer = layui.layer ,form = layui.form; layer.open({ title: '<i class="layui-icon layui-icon-face-smile" style="color: #1E9FFF;"></i> 欢迎来自<?php echo get_referer();?>的朋友' ,content: '<i class="layui-icon layui-icon-group" style="color: green;"></i>若当前文章未能解决您的问题,您可以先尝试站内搜索,当然也可以给我留言喔(^_^)!' ,offset: 'rb' ,time:5000 ,anim:2 ,moveOut: true ,maxmin: true ,shade: 0 ,btn: ['确认', '关闭'] ,yes: function(index, layero){ /*window.open("<?php echo $_SERVER['HTTP_REFERER'];?>");*/ } ,btn2: function(index, layero){ } ,cancel: function(){ } }); exports('index', {}); }); } Notification.requestPermission().then(function(result) { if (result === 'denied') { echo_layer(); console.log('许可不获批准。允许重试'); return; } if (result === 'default') { echo_layer(); console.log('许可请求被驳回。'); return; } }); </script> <?php }?>中间用到的layui.js和layui.css请自行官网下载引入。
说一下emlog如何引入这个
1、先把<?php function get_referer($referers=''){.....}?>整段函数复制到module.php
2、然后去header.php引入layui.js和layui.css
3、之后再把<?php if(get_referer()){?>....<?php }?>整段代码放到footer.php即可
4、最后使用搜索引擎或者友情链接进行测试来路测试。
ps:小杰还没有写搜索关键词判断,后面有时间再搞吧。先把框架发在这里,技术大佬可以自行修改样式
发表评论: