兼容 谷歌、火狐、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();
};
}
效果图如下:
以上内容就是这些,如有好的方法欢迎大家多多赐教指正!谢谢。