Notification HTML5新属性，复制代码创建HTML文件，浏览器查看效果
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>桌面通知</title>
6 <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
7 </head>
8 <body>
9 <button onclick="show_notification('新消息', '开局一把枪一条狗，装备全靠捡！')">显示通知</button>
10
11 <script>
12 function show_notification(title, msg) {
13 var Notification = window.Notification || window.mozNotification || window.webkitNotification;
14 var data = {
15 body: msg, // 消息内容
16 icon: 'https://gss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/a2f3c8cbb2bbc4dcccabd7d4cbbdb0a1c23e' // 消息图标
17 };
18
19 if(Notification){ // 检测是否支持桌面通知
20 if(Notification.permission == "granted") { // 已经允许通知
21 var instance = new Notification(title, data);
22 instance.onclick = function() { // 点击事件
23 alert('你点击了消息弹框！');
24 console.log('onclick');
25 instance.close();
26 };
27 instance.onerror = function() { // 错误
28 console.log('onerror');
29 };
30 instance.onshow = function() { // 打开事件
31 console.log('onshow');
32 };
33 instance.onclose = function() { // 关闭事件
34 console.log('onclose');
35 };
36 }else{ // 第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)
37 Notification.requestPermission(function(status) {
38 if(status === "granted"){ // 用户允许
39 var instance = new Notification(title, data);
40 instance.onclick = function() {};
41 instance.onerror = function() {};
42 instance.onshow = function() {};
43 instance.onclose = function() {};
44 }else{ // 用户禁止
45 return false
46 }
47 });
48 }
49 }else{
50 alert('浏览器不支持桌面通知！');
51 }
52
53 }
54
55 </script>
56 </body>
57 </html>
