实战Chrome浏览器桌面通知
更新:在一些新版本的chrome中使用以下方式进行通知
完整代码如下:
Notification.requestPermission( function(status) { var n = new Notification("abshu.com html5桌面通知", {body: "这里是通知内容"}); });
Chrome浏览器有个桌面通知API的功能,这个功能可以在浏览器外现实通知信息。即便你没有查看浏览器照样可以看到通知。现在我们用js去实现简单的桌面通知功能
需要注意的是,只有在使用Chrome浏览器时才会有这个功能的
步骤:
1.所以首先需要用if (window.webkitNotifications) 判断浏览器是否支持此功能。
2.接下来是要判断用户是否允许此站点使用桌面通知,window.webkitNotifications.checkPermission(),如果允许了,会返回0
3.如果用户未允许,就使用window.webkitNotifications.requestPermission()来提示用户允许桌面通知。
4.等上诉条件满足后就要使用弹出桌面提示了。
var notification = webkitNotifications.createNotification( 'icon.png', // icon url - can be relative '这里是标题', // notification title '这里是内容' // notification body text );
代码如下:
if (window.webkitNotifications) { if (window.webkitNotifications.checkPermission() == 0) { var n = window.webkitNotifications.createNotification("../../img/logo_s.gif", 'ABshu.com', $("#msg").val()); //n.display = function() {} //n.onerror = function() {} //n.onclose = function() {} n.onclick = function() {this.cancel();} n.show(); }else{ alert("需要允许桌面通知"); window.webkitNotifications.requestPermission(); } }else{ alert("浏览器不支持桌面通知"); }
在实际运行中会多次点击按钮后会多次提醒,这就需要用到replaceId这个唯一标识了。加上他,只会提示一个标识框。
完整代码如下:
if (window.webkitNotifications) { if (window.webkitNotifications.checkPermission() == 0) { var n = window.webkitNotifications.createNotification("../../img/logo_s.gif", 'ABshu.com', $("#msg").val()); //n.display = function() {} //n.onerror = function() {} //n.onclose = function() {} n.onclick = function() {this.cancel();} n.replaceId = "abshu"; n.show(); }else{ alert("需要允许桌面通知"); window.webkitNotifications.requestPermission(); } }else{ alert("浏览器不支持桌面通知"); }