HTML5实现浏览器的桌面通知 (兼容性多个浏览器)
HTML5实现浏览器的桌面通知 (兼容性多个浏览器)
提示:需要在服务器上运行才会有效果,直接运行代码是没有效果的
代码如下:
<script type="text/javascript"> /* * 桌面通知 * 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(); }; console.log(notification); } windowsNotify('asdsd'); </script>
版权声明
由 durban创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 博客( https://www.gowhich.com ),版权所有,侵权必究。
本文永久链接: https://www.gowhich.com/blog/641
版权声明
由 durban创作并维护的 Gowhich博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。
本文首发于 Gowhich博客( https://www.gowhich.com ),版权所有,侵权必究。
本文永久链接: https://www.gowhich.com/blog/641