码迷,mamicode.com
首页 > 其他好文 > 详细

关于chorme 通知功能

时间:2015-10-19 10:41:12      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

1、先判断当前的浏览器是否支持开启桌面通知 window.webkitNotifications;
2、响应用户操作,如果用户之前已经允许本站的桌面通知,则window.webkitNotifications.checkPermission()会返回0;
3、如果用户之前拒绝或是未允许开启桌面通知,可使用window.webkitNotifications.requestPermission(callback);再次弹出询问用户的提示,否则当用户之前拒绝过,按钮点击了也是不会有响应操作的。
注:在给notification实例对象指定replaceId可防止弹出过多的桌面通知(类似唯一标识,弹出同名的replaceId通知实例时,后面的通知会覆盖之前的通知)。
但我在查看W3C的文档时,发现它里面标有一个setReplaceId的方法,可实际上是没有这个方法,取而代之的是名为“replaceId”的属性。
 
<!DOCTYPE html>
 <html>
  <head>
   <title>Google 桌面通知</title>
   <meta name="generator" content="editplus" />
   <meta name="author" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <meta http-equiv=‘content-type‘ content=‘text/html; charset=utf-8‘ />
  </head>
  <body>
  
  <button id=‘btn‘>显示桌面通知</button>  
  
  <script type=‘text/javascript‘> 
   document.querySelector("#btn").addEventListener(‘click‘, notify, false);
   function notify() {
        if (window.webkitNotifications) {
            if (window.webkitNotifications.checkPermission() == 0) {
                var notification_test = window.webkitNotifications.createNotification("http://images.cnblogs.com/cnblogs_com/flyingzl/268702/r_1.jpg", ‘标题‘, ‘内容‘+new Date().getTime());
                notification_test.display = function() {}
                notification_test.onerror = function() {}
               notification_test.onclose = function() {}
               notification_test.onclick = function() {this.cancel();}
              
               notification_test.replaceId = ‘Meteoric‘;
    
               notification_test.show();
                           
               var tempPopup = window.webkitNotifications.createHTMLNotification(["http://www.baidu.com/", "http://www.soso.com"][Math.random() >= 0.5 ? 0 : 1]);
               tempPopup.replaceId = "Meteoric_cry";
               tempPopup.show();
          } else {
              window.webkitNotifications.requestPermission(notify);
           }
       } 
   }
</script>
</body>
</html>

  

关于chorme 通知功能

标签:

原文地址:http://www.cnblogs.com/shuangren/p/4890979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!