兼容 谷歌、火狐、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();
};
}
效果图例如以下:
以上内容就是这些,如有好的方法欢迎大家多多赐教指正!谢谢。
版权声明:本文博主原创文章。博客,未经同意不得转载。