程序员人生 网站导航

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

栏目:htmlcss时间:2014-08-23 23:21:12
容 谷歌、火狐、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. //桌面通知(兼容360) 
  25. function windowsNotify360(strNewsContent) { 
  26.     if (window.webkitNotifications && window.webkitNotifications.checkPermission() == 0) { 
  27.         var notify = window.webkitNotifications.createNotification( 
  28.             "http://www.fx678.com/corp/images/aboutus/htw.jpg"
  29.                 '汇通-新闻中心'
  30.             strNewsContent 
  31.         ); 
  32.  
  33.         //设置定时撤销机制,防止通知长时间显示不被关闭 
  34.         notify.ondisplay = function (event) { 
  35.             setTimeout(function () { 
  36.                 event.currentTarget.cancel(); 
  37.             }, 10000); 
  38.         }; 
  39.         //下面是定义点击事件,类似地还可定义其它事件 
  40.         notify.onclick = function () { 
  41.             window.focus(); 
  42.             this.cancel(); 
  43.         }; 
  44.         //弹出 
  45.         notify.show(); 
  46.     } else if (window.webkitNotifications) { 
  47.         window.webkitNotifications.requestPermission(windowsNotify360); 
  48.     } 
  49.  
  50.  
  51. //桌面通知(兼容火狐、谷歌) 
  52. function windowsNotifyFFAndGE(strNewsContent) { 
  53.     var notification = new Notification('汇通-新闻中心'
  54.                          { 
  55.                             body: strNewsContent, 
  56.                             icon: "http://www.fx678.com/corp/images/aboutus/htw.jpg" 
  57.                          }); 
  58.  
  59.     //设置定时撤销机制,防止通知长时间显示不被关闭 
  60.     notification.ondisplay = function (event) { 
  61.         setTimeout(function () { 
  62.             event.currentTarget.cancel(); 
  63.         }, 10000); 
  64.     }; 
  65.  
  66.     //下面是定义点击事件,类似地还可定义其它事件 
  67.     notification.onclick = function () { 
  68.         window.focus(); 
  69.         this.cancel(); 
  70.     }; 

效果图如下:

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐