兼容 谷歌、火狐、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. } 

效果圖如下：

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈