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();//设置允许通知
}
}
拓展:内容可设置属性如下:
- dir : 文字的方向;它的值可以是 auto(自动), ltr(从左到右), or rtl(从右到左)
- lang: 指定通知中所使用的语言。
- body: 通知中额外显示的字符串
- tag: 赋予通知一个ID,以便在必要的时候对通知进行刷新、替换或移除。
- icon: 一个图片的URL,将被用于显示通知的图标。
可用事件如下:
- Notification.onclick处理 click 事件的处理。每当用户点击通知时被触发。
- Notification.onshow处理 show 事件的处理。当通知显示的时候被触发。
- Notification.onerror处理 error 事件的处理。每当通知遇到错误时被触发。
- Notification.onclose处理 close 事件的处理。当用户关闭通知时被触发。
关闭通知的实例方法:
var n = new Notification(theTitle,options);
setTimeout(n.close.bind(n), 4000);
注意:ie不支持,本人是在谷歌和火狐测试成功。