Web Notification基础应用

最新推荐文章于 2021-09-12 21:16:26 发布

wazz753

最新推荐文章于 2021-09-12 21:16:26 发布

阅读量722

点赞数 1

分类专栏：框架

本文链接：https://blog.csdn.net/wazz753/article/details/72478007

版权

框架专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Web Notification基础应用

Web Notification可以在打开页面时，在windows右下角弹出一个消息提示框，是在html5最的新功能

本案例是在eclipse中编写

1、 WebContent中，新建img目录，拷贝一个图片文件，如mm1.jpg

2、在index.jsp中编写如下代码：

<%@page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Inserttitle here</title>
<scripttype="text/javascript">
/*
           通知可以说是web中比较常见且重要的功能，私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈，这个时候，就需要页面给予即使的通知。
           在以前，我们的通知实现主要是通过闪烁页面的标题内容来实现，实现原理其实很简单，就是定时器不断修改document.title的值。
*/
/*
var titleInit = document.title, isShine = true;
 
setInterval(function() {
    vartitle = document.title;
    if(isShine == true) {
       if (/新/.test(title) == false) {
           document.title = '【你有新消息】';   
        }else {
           document.title = '【　　　　　】';
        }
    }else {
       document.title = titleInit;
    }
}, 500);
 
//这里有一个小的知识点，就是浏览器窗体获得焦点和失去焦点，Chrome和FireFox浏览器是window的onfocus, onblur方法；而IE浏览器则是document的onfocusin, onfocusout方法，因此有
window.onfocus = function() {
   isShine = false;
};
window.onblur = function() {
   isShine = true;
};
 
// for IE
document.onfocusin = function() {
   isShine = false;
};
document.onfocusout = function() {
   isShine = true;
};
*/
/*
上面的方式实现提现有些不足，使用HTML5 Web Notification会比上面方式好些
HTML5 Web Notification通知是属于桌面性质的通知，有点类似于显示器右下角蹦出的QQ弹框，杀毒提示之类的，跟浏览器是脱离的，消息是置顶的。
*/
function init() {
           //如果浏览器支持通知
           if (window.Notification) {
              var button = document.getElementById('button');
                    var text =document.getElementById('text');
              
              var popNotice = function() {
                       //判断是否有权限发送通知，其中granted表示用户允许通知，denied表示用户嫌弃你，default表示用户目前还没有管你
                   if (Notification.permission =="granted") {
                            //创建一个通知对象
                       var notification = newNotification("Hi，帅哥：", {
                           body: '可以加你为好友吗？',
                           icon: 'img/mm1.jpg',
                           renotify: true  //如果是true，则表示替换以前的通知，如果false，则会叠高楼（默认是true）
                           //还有其他参数，见：http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/
                       });
                       //点击弹出来的通知事件
                       notification.onclick = function() {
                           text.innerHTML = '张小姐已于' + newDate().toTimeString().split(' ')[0] + '加你为好友！';
                           notification.close(); //关闭通知窗口
                       };
                  }   
              };
              
              button.onclick = function() {
                   if (Notification.permission =="granted") {//如果有权限发送通知
                       popNotice();//调用上面定义的发送通知的函数
                   } else if (Notification.permission !="denied") {//如果不允许发送通知
                            //向用户发送获取通知权限请求
                      Notification.requestPermission(function (permission) {
                         popNotice();//如果用户允许通知权限，调用上面定义的发送通知的函数
                       });
                   }
              };
           } else {
              alert('浏览器不支持Notification');   
           }
}
</script>
</head>
<bodyοnlοad="init();">
<button id="button">有人想加你为好友</button>
<p id="text"></p>
</body>
</html>

3、打开浏览器进行测试，访问index.jsp，此时浏览器会弹出一个请求允许的框，只有同意后，才可以使用Notification通知功能，在window右下角弹出一个消息提示框