兼容 谷歌、火狐、360系列浏览器的桌面通知

1、通知授权问题

       开启桌面通知需要检测当前浏览器是否支持并且有授权，示例代码如下：
 

1.  if (!("Notification" in window) && !window.webkitNotifications) {   
2. //不支持     
3. alert("很遗憾，您当前浏览器不支持该功能！\n建议在360、谷歌、火狐等浏览器上使用此功能");   
4.    } else if (Notification.permission != undefined && Notification.permission != null) {   
5. if (Notification.permission != "granted") {   
6.     /*未授权(谷歌、火狐)  此处省略 300行*/   
7. }   
8.    } else if (Notification.permission == null || Notification.permission == undefined) {   
9. if (window.webkitNotifications.checkPermission() != 0) {   
10.     /*未授权(360系列) 此处省略 300行*/   
11. }   
12.    }else {   
13. /*支持并已授权(此处省略 300行) */   
14.    }   

效果图如下：

2、桌面通知调用方法

    桌面通知调用方法(windowsNotify)如下：
 

1. /* 
2.  * 桌面通知 
3.  * strNewsContent:通知的内容 
4.  */ 
5. function windowsNotify(strNewsContent) { 
6.     if (!("Notification" in window) && !window.webkitNotifications && window.webkitNotifications.checkPermission() != 0) 
7.         return; 
8.  
9.     if (Notification.permission == null || Notification.permission == undefined) 
10.         windowsNotify360(strNewsContent); 
11.     else if (Notification.permission === "granted") 
12.         windowsNotifyFFAndGE(strNewsContent); 
13.     else if (Notification.permission !== 'denied') { 
14.         Notification.requestPermission(function (permission) { 
15.             if (!('permission' in Notification)) 
16.                 Notification.permission = permission; 
17.  
18.             if (permission === "granted") 
19.                 windowsNotifyFFAndGE(strNewsContent); 
20.         }); 
21.     } 
22. } 
23.  
24.  
25. //桌面通知(兼容360) 
26. function windowsNotify360(strNewsContent) { 
27.     if (window.webkitNotifications && window.webkitNotifications.checkPermission() == 0) { 
28.         var notify = window.webkitNotifications.createNotification( 
29.             "http://www.fx678.com/corp/images/aboutus/htw.jpg", 
30.                 '汇通-新闻中心', 
31.             strNewsContent 
32.         ); 
33.  
34.         //设置定时撤销机制，防止通知长时间显示不被关闭 
35.         notify.ondisplay = function (event) { 
36.             setTimeout(function () { 
37.                 event.currentTarget.cancel(); 
38.             }, 10000); 
39.         }; 
40.         //下面是定义点击事件，类似地还可定义其它事件 
41.         notify.onclick = function () { 
42.             window.focus(); 
43.             this.cancel(); 
44.         }; 
45.         //弹出 
46.         notify.show(); 
47.     } else if (window.webkitNotifications) { 
48.         window.webkitNotifications.requestPermission(windowsNotify360); 
49.     } 
50. } 
51.  
52.  
53. //桌面通知(兼容火狐、谷歌) 
54. function windowsNotifyFFAndGE(strNewsContent) { 
55.     var notification = new Notification('汇通-新闻中心', 
56.                          { 
57.                             body: strNewsContent, 
58.                             icon: "http://www.fx678.com/corp/images/aboutus/htw.jpg" 
59.                          }); 
60.  
61.     //设置定时撤销机制，防止通知长时间显示不被关闭 
62.     notification.ondisplay = function (event) { 
63.         setTimeout(function () { 
64.             event.currentTarget.cancel(); 
65.         }, 10000); 
66.     }; 
67.  
68.     //下面是定义点击事件，类似地还可定义其它事件 
69.     notification.onclick = function () { 
70.         window.focus(); 
71.         this.cancel(); 
72.     }; 
73. } 

效果图如下：

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠