码迷,mamicode.com
首页 > Web开发 > 详细

html5桌面通知,notification的使用

时间:2015-06-29 20:15:55      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

1先判断浏览器是否支持:window.Notification

2判断浏览器是否开启提示的权限:Notification.permission === ‘granted‘(如果不允许则设置为允许:Notification.requestPermission())

3设置提示的内容:var notification = new Notification(‘订单提示‘, { body: "您有新订单:" + data + "" });//Notification("标题","内容")

4可以设置其他功能比如消息点击事件:notification.onclick = function (e) {
                                                alert("点击")
                                              }

例:

if (window.Notification) {
                    if (Notification.permission === ‘granted‘) {
                        var notification = new Notification(‘标题‘, { body: "内容可以自己随便定义" });
                        notification.onclick = function (e) {
                            alert("点击了我")//可以点击打开一个网址
                        }
                    } else {
                        Notification.requestPermission();//设置允许通知
                    }
                }

拓展:内容可设置属性如下:

  1. dir : 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)
  2. lang: 指定通知中所使用的语言。
  3. body: 通知中额外显示的字符串
  4. tag: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
  5. icon: 一个图片的URL,将被用于显示通知的图标。

 可用事件如下:

关闭通知的实例方法:

var n = new Notification(theTitle,options);
  setTimeout(n.close.bind(n), 4000);

 

注意:ie不支持,本人是在谷歌和火狐测试成功。

自己开发的时候记录一下,大神路过的话 请忽略或者指教一下有什么需要注意的点,谢谢。

 

html5桌面通知,notification的使用

标签:

原文地址:http://www.cnblogs.com/wuyubing/p/4608303.html

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