1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Notification</title> 6 </head> 7 <body> 8 <div class="content"> 9 <button id="creatNotification">Creat</button> 10 <button id="closeNotification">Close</button> 11 </div> 12 <script> 13 var page = { 14 data : { 15 Notification : '', 16 count : 0 17 }, 18 init : function(){ 19 this.bindEvent(); 20 }, 21 bindEvent : function(){ 22 var _this = this, 23 creatN = document.getElementById('creatNotification'), 24 closeN = document.getElementById('closeNotification'); 25 creatN.onclick = function(){ 26 _this.creatNotification(); 27 } 28 closeN.onclick = function(){ 29 _this.closeNotification(); 30 } 31 }, 32 /* 33 Notification对象permission属性： 34 default ：用户尚未配浏览器请求显示通知权限。 35 grant ：有显示通知权限。 36 denied ：拒绝显示通知权限。 37 */ 38 creatNotification : function(){ 39 var _this = this; 40 if(window.Notification.permission === 'granted'){ 41 //创建通知 42 _this.data.Notification = new Notification('简单文本通知',{ 43 dir : 'ltr',//通知的文字方向 44 // icon : 'icon', 45 tag : 'MyID',//值为字符串，指定通知的唯一标识 46 body : '这是第'+ (++_this.data.count) + '通知内容' 47 }); 48 //通知被显示 49 _this.data.Notification.onshow = function(){ 50 alert('通知被显示'); 51 } 52 //通知被关闭 53 _this.data.Notification.onclose = function(){ 54 // _this.data.count--; 55 alert('通知被关闭'); 56 } 57 //通知被点击 58 _this.data.Notification.onclick = function(){ 59 alert('通知被点击'); 60 } 61 // onerror 事件 62 _this.data.Notification.onerror = function(e){ 63 //e代表被捕捉到的错误对象 64 alert('error') 65 } 66 } 67 else if (window.Notification.permission === 'default'){ 68 window.Notification.requestPermission(); 69 } 70 }, 71 closeNotification : function(){ 72 //close()方法关闭通知 73 this.data.Notification.close(); 74 } 75 } 76 window.onload = page.init(); 77 </script> 78 </body> 79 </html>