html5桌面通知,notification的使用(转)

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不支持,本人是在谷歌和火狐测试成功。

全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务