本文从总结工作,并且参照大量的网络资源的。我们希望有同样需求的朋友来帮忙。
(部分):
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
开启桌面通知须要检測当前浏览器是否支持而且有授权,演示样例代码例如以下:
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行) */ }
桌面通知调用方法(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(); }; }
效果图例如以下:
以上内容就是这些,如有好的方法欢迎大家多多赐教指正!谢谢。
版权声明:本文博主原创文章。博客,未经同意不得转载。
原文:http://www.cnblogs.com/lcchuguo/p/4912291.html