首页 > 代码库 > 消息通知
消息通知
传统方法：
实现方式：通过闪烁页面的标题
实现方法：使用定时器不断地修改document.title的值
var titleInit = document.title, isShine = true; setInterval(function () { var title = document.title; if (isShine == true) { if (/新/.test(title) == false) { document.title = ‘【你有新消息】‘; } else { document.title = ‘【 】‘; } } else { document.title = titleInit; } }, 500); window.onfocus = function () { isShine = false; }; window.onblur = function () { isShine = true; }; // for IE document.onfocusin = function () { isShine = false; }; document.onfocusout = function () { isShine = true; };
窗体失焦的时候，标题就会闪。
这里有一个小的知识点，就是浏览器窗体获得焦点和失去焦点，Chrome和FireFox浏览器是window的onfocus, onblur方法；而IE浏览器则是document的onfocusin, onfocusout方法。
HTML5新特性之WebNotifications
要创建消息通知，首先我们要创建一个消息框，这非常很简单，直接使用window对象下面的Notification类即可，代码如下：
var n = new Notification("sir, you got a message", { icon: ‘img/icon.png‘, body: ‘you will have a meeting 5 minutes later.‘ }); 在Notification这个类的构造函数中，有两个重要的参数，第一个是消息的标题，第二个是消息体对象，其中包括消息框的图标（icon）和消息内容（body）。
在执行完以上代码后，我们就成功地创建了一个消息框实例.
到这里我们已经成功了一半，但能不能正确地显示出这个消息框，最终还取决于用户的授权。鉴于浏览器的安全机制，只有用户同意网页弹出消息通知框，消息通知才能够真正的显示出来。所以现在我们要做的就是申请用户授权。
Notification类提供了一个requestPermission方法，用来请求用户授权，代码如下：
Notification.requestPermission(function(status) { //status是授权状态，如果用户允许显示桌面通知，则status为‘granted‘ console.log(‘status: ‘ + status); //permission只读属性 var permission = Notification.permission; //default 用户没有接收或拒绝授权请求 不能显示通知 //granted 用户接受授权请求 允许显示通知 //denied 用户拒绝授权请求 不允许显示通知 console.log(‘permission: ‘ + permission); }); 完整实例如下：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="http://www.mamicode.com/assets/js/jquery.js"></script> <script type="text/javascript"> var NotificationHandler = { isNotificationSupported: ‘Notification‘ in window, isPermissionGranted: function () { return Notification.permission === ‘granted‘; }, requestPermission: function () { if (!this.isNotificationSupported) { console.log(‘the current browser does not support Notification API‘); return; } Notification.requestPermission(function (status) { //status是授权状态，如果用户允许显示桌面通知，则status为‘granted‘ console.log(‘status: ‘ + status); //permission只读属性 var permission = Notification.permission; //default 用户没有接收或拒绝授权 不能显示通知 //granted 用户接受授权 允许显示通知 //denied 用户拒绝授权 不允许显示通知 console.log(‘permission: ‘ + permission); }); }, showNotification: function () { if (!this.isNotificationSupported) { console.log(‘the current browser does not support Notification API‘); return; } if (!this.isPermissionGranted()) { console.log(‘the current page has not been granted for notification‘); return; } var n = new Notification("sir, you got a message", { icon: ‘img/icon.png‘, body: ‘you will have a meeting 5 minutes later.‘ }); //onshow函数在消息框显示时会被调用 //可以做一些数据记录及定时操作等 n.onshow = function () { console.log(‘notification shows up‘); //5秒后关闭消息框 setTimeout(function () { n.close(); }, 5000); }; //消息框被点击时被调用 //可以打开相关的视图，同时关闭该消息框等操作 n.onclick = function () { alert(‘open the associated view‘); //opening the view... n.close(); }; //当有错误发生时会onerror函数会被调用 //如果没有granted授权，创建Notification对象实例时，也会执行onerror函数 n.onerror = function () { console.log(‘notification encounters an error‘); //do something useful }; //一个消息框关闭时onclose函数会被调用 n.onclose = function () { console.log(‘notification is closed‘); //do something useful }; } }; document.addEventListener(‘load‘, function () { //try to request permission when page has been loaded. NotificationHandler.requestPermission(); }); setTimeout(function () { //if there has new mail, show notification NotificationHandler.showNotification(); }, 5000); </script></head><body> <button onclick="NotificationHandler.showNotification()">show notification</button> </body></html>
引用： http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/
http://blog.csdn.net/liuhe688/article/details/41971215
消息通知
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。