摘要:
桌面通知,我们经常看到的比如QQ,Skype在右下角的消息提醒。在网页中我们也可以用Javascript模拟实现这一功能,只是这个消息框中浏览器中。目前浏览器依然是一个严格的沙盒工作模式,这种模式把浏览器和桌面的通信隔离开,但WHATWG下在讨论的一种特性Notification可以跨越沙盒通过桌面向用户发出浏览器的通知。现在在Html5中也可以实现这一功能,目前Notification的浏览器支持情况不大好,我测试了一下,IE9,FF12,FF20,Opera11不支持,Chrome支持最好。
如何使用:
一、检测浏览器是否支持通过window.webkitNotifications可以判断浏览器是否支持notification
if(!window.webkitNotifications){
alert("您的浏览器不支持Notification桌面通知!");
}
//请求授权,如果成功则执行回调函数
function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
function showNotification(){
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
}else{
//show Notification here..
}
var notification = window.webkitNotifications.createNotification("images/HTML5.png", "标题", "内容内容内容内容内容内容内容内容内容内容内容内容内容内容");
notification.onshow = function() { alert("showing");}notification.onclick = function(){alert("clicked");}
notification.show();
notification.cancel();
if(!window.webkitNotifications){
alert("您的浏览器不支持Notification桌面通知!");
}
function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
var notification;
function showNotification(){
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
}else {
notification = window.webkitNotifications.createNotification("HTML5.png", "Camnpr", "window.webkitNotifications");
notification.onshow = function() { setTimeout('notification.cancel()', 5000); }
notification.onclick = function(){alert("clicked");}
notification.show();
}
}
HTML代码部分:(只有通过点击按钮,Chrome浏览器会提示你,是否允许,点击允许后,就会出现效果。 直接调用 showNotification() 不行。)
参考:Html5 系列之:桌面通知Notification
Using the Notifications API
PS:
baidu.on( window, 'click', function(){
if( window.webkitNotifications && window.webkitNotifications.checkPermission() != 0 ) {
window.webkitNotifications.requestPermission();
}
} );
baidu.on( window, 'online', function(){} );
baidu.on( window, 'offline', function(){
if( window.webkitNotifications && window.webkitNotifications.checkPermission() == 0 ) {
var notification = window.webkitNotifications.createNotification( '', '提醒', '您当前网络情况有点差,好像掉线了 :)' );
notification.show();
notification = null;
}
});