HTML5新特性之WebNotifications

原文：http://blog.csdn.net/liuhe688/article/details/41971215

 

 <!DOCTYPE html>  
  <html>  
  <head>  
  <meta charset="utf-8" />  
  <title>The Essential Guide to HTML5</title>  
  </head>  
    
  <body>  
  <a href="javascript:popNotifications();">点击我</a>  
 </body>  
 <script type="text/javascript">  
 
 window.onload=function(){
     popNotifications()
 }
 
 function popNotifications(){
 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
};
 }
</script>  
</html>

 

 

最后，需要注意的是，消息通知只有通过Web服务访问该页面时才会生效，如果直接双击打开本地文件，是没有任何效果的。所以在平时做练习的时候也需要把文件目录放进Web容器内，切记。

消息通知是个不错的特性，可是也不排除有些站点恶意的使用这个功能，一旦用户授权之后，不时的推送一些不太友好的消息，打扰用户的工作，这个时候我们可以移除该站点的权限，禁用其消息通知功能。我们可以依次点击设置打开设置的选项卡，然后点击底部的显示高级设置，在隐私一项中点击内容设置，最后会弹出一个内容面板，向下滑动找到消息通知一项，如何更改，想必就不用多说了。

讲到这里，关于消息通知的基本应用也就涵盖个差不多了，希望朋友们能仔细体会，最后可以把这个新特性应用在实际项目中，必定会增色不少的。

 

posted @ 2017-01-12 11:45  这个名字想了很久~  阅读(789)  评论(0)  编辑  收藏  举报