<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notification</title>
</head>
<body>
<div class="content">
<button id="creatNotification">Creat</button>
<button id="closeNotification">Close</button>
</div>
<script>
var page = {
data : {
Notification : '',
count : 0
},
init : function(){
this.bindEvent();
},
bindEvent : function(){
var _this = this,
creatN = document.getElementById('creatNotification'),
closeN = document.getElementById('closeNotification');
creatN.onclick = function(){
_this.creatNotification();
}
closeN.onclick = function(){
_this.closeNotification();
}
},
/*
Notification对象permission属性：
default ：用户尚未配浏览器请求显示通知权限。
grant ：有显示通知权限。
denied ：拒绝显示通知权限。
*/
creatNotification : function(){
var _this = this;
if(window.Notification.permission === 'granted'){
//创建通知
_this.data.Notification = new Notification('简单文本通知',{
dir : 'ltr',//通知的文字方向
// icon : 'icon',
tag : 'MyID',//值为字符串，指定通知的唯一标识
body : '这是第'+ (++_this.data.count) + '通知内容'
});
//通知被显示
_this.data.Notification.onshow = function(){
alert('通知被显示');
}
//通知被关闭
_this.data.Notification.onclose = function(){
// _this.data.count--;
alert('通知被关闭');
}
//通知被点击
_this.data.Notification.onclick = function(){
alert('通知被点击');
}
// onerror 事件
_this.data.Notification.onerror = function(e){
//e代表被捕捉到的错误对象
alert('error')
}
}
else if (window.Notification.permission === 'default'){
window.Notification.requestPermission();
}
},
closeNotification : function(){
//close()方法关闭通知
this.data.Notification.close();
}
}
window.onload = page.init();
</script>
</body>
</html>