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

全部评论

相关推荐

昨天 09:08
裁应届生,一分钱补偿没有,离职了还脑控你,跟踪你,定位你,丁东服务是搞系每一个人
牛客吹哨人:建议细说...哨哥晚点统一更新到黑名单:不要重蹈覆辙!25届毁意向毁约裁员黑名单https://www.nowcoder.com/discuss/1317104
叮咚买菜稳定性 8人发布 投递叮咚买菜等公司10个岗位 >
点赞 评论 收藏
分享
努力学习的小绵羊:我反倒觉得这种挺好的,给不到我想要的就别浪费大家时间了
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务