兼容 谷歌、火狐、360系列浏览器桌面通知()有用

兼容 谷歌、火狐、360系列浏览器桌面通知(有用)

本文从总结工作，并且参照大量的网络资源的。我们希望有同样需求的朋友来帮忙。

(部分)：
http://xsk.tehon.org/den/index.php/category/tech/html5-audio-notifications.html http://ttsvetko.github.io/HTML5-Desktop-Notifications/# http://www.cnblogs.com/meteoric_cry/archive/2012/03/31/2426256.html

1、通知授权问题

开启桌面通知须要检測当前浏览器是否支持而且有授权，演示样例代码例如以下：

if (!("Notification" in window) && !window.webkitNotifications) {
//不支持
alert("非常遗憾，您当前浏览器不支持该功能！\n建议在360、谷歌、火狐等浏览器上使用此功能");
} else if (Notification.permission != undefined && Notification.permission != null) {
if (Notification.permission != "granted") {
/*未授权(谷歌、火狐)  此处省略 300行*/
}
} else if (Notification.permission == null || Notification.permission == undefined) {
if (window.webkitNotifications.checkPermission() != 0) {
/*未授权(360系列) 此处省略 300行*/
}
}else {
/*支持并已授权(此处省略 300行) */
}

效果图例如以下：

2、桌面通知调用方法

桌面通知调用方法(windowsNotify)例如以下：

/*
* 桌面通知
* strNewsContent:通知的内容
*/
function windowsNotify(strNewsContent) {
if (!("Notification" in window) && !window.webkitNotifications && window.webkitNotifications.checkPermission() != 0)
return;

if (Notification.permission == null || Notification.permission == undefined)
windowsNotify360(strNewsContent);
else if (Notification.permission === "granted")
windowsNotifyFFAndGE(strNewsContent);
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (!('permission' in Notification))
Notification.permission = permission;

if (permission === "granted")
windowsNotifyFFAndGE(strNewsContent);
});
}
}

//桌面通知(兼容360)
function windowsNotify360(strNewsContent) {
if (window.webkitNotifications && window.webkitNotifications.checkPermission() == 0) {
var notify = window.webkitNotifications.createNotification(
"http://www.fx678.com/corp/images/aboutus/htw.jpg",
'汇通-新闻中心',
strNewsContent
);

//设置定时撤销机制，防止通知长时间显示不被关闭
notify.ondisplay = function (event) {
setTimeout(function () {
event.currentTarget.cancel();
}, 10000);
};
//以下是定义点击事件，相似地还可定义其他事件
notify.onclick = function () {
window.focus();
this.cancel();
};
//弹出
notify.show();
} else if (window.webkitNotifications) {
window.webkitNotifications.requestPermission(windowsNotify360);
}
}

//桌面通知(兼容火狐、谷歌)
function windowsNotifyFFAndGE(strNewsContent) {
var notification = new Notification('汇通-新闻中心',
{
body: strNewsContent,
icon: "http://www.fx678.com/corp/images/aboutus/htw.jpg"
});

//设置定时撤销机制，防止通知长时间显示不被关闭
notification.ondisplay = function (event) {
setTimeout(function () {
event.currentTarget.cancel();
}, 10000);
};

//以下是定义点击事件。相似地还可定义其他事件
notification.onclick = function () {
window.focus();
this.cancel();
};
}

效果图例如以下：



以上内容就是这些，如有好的方法欢迎大家多多赐教指正！谢谢。