1、先判断当前的浏览器是否支持开启桌面通知 window.webkitNotifications；
2、响应用户操作，如果用户之前已经允许本站的桌面通知，则window.webkitNotifications.checkPermission()会返回0；
3、如果用户之前拒绝或是未允许开启桌面通知，可使用window.webkitNotifications.requestPermission(callback);再次弹出询问用户的提示，否则当用户之前拒绝过，按钮点击了也是不会有响应操作的。
注：在给notification实例对象指定replaceId可防止弹出过多的桌面通知（类似唯一标识，弹出同名的replaceId通知实例时，后面的通知会覆盖之前的通知）。
但我在查看W3C的文档时，发现它里面标有一个setReplaceId的方法，可实际上是没有这个方法，取而代之的是名为“replaceId”的属性。
<!DOCTYPE html>
<html>
<head>
<title>Google 桌面通知</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv=‘content-type‘ content=‘text/html; charset=utf-8‘ />
</head>
<body>
<button id=‘btn‘>显示桌面通知</button>
<script type=‘text/javascript‘>
document.querySelector("#btn").addEventListener(‘click‘, notify, false);
function notify() {
if (window.webkitNotifications) {
if (window.webkitNotifications.checkPermission() == 0) {
var notification_test = window.webkitNotifications.createNotification("http://images.cnblogs.com/cnblogs_com/flyingzl/268702/r_1.jpg", ‘标题‘, ‘内容‘+new Date().getTime());
notification_test.display = function() {}
notification_test.onerror = function() {}
notification_test.onclose = function() {}
notification_test.onclick = function() {this.cancel();}
notification_test.replaceId = ‘Meteoric‘;
notification_test.show();
var tempPopup = window.webkitNotifications.createHTMLNotification(["http://www.baidu.com/", "http://www.soso.com"][Math.random() >= 0.5 ? 0 : 1]);
tempPopup.replaceId = "Meteoric_cry";
tempPopup.show();
} else {
window.webkitNotifications.requestPermission(notify);
}
}
}
</script>
</body>
</html>
时间： 2024-10-19 08:20:31