前端js实现桌面通知

来源:互联网 发布:php 检验 excel 编辑:程序博客网 时间:2024/05/18 14:43
前端js实现桌面通知
前端js实现桌面通知,思路是调用Notification对象,先检测用户是否授权桌面显示,若授权则进行显示,若不授权则不显示。
在Notification对象中常用的属性有title(桌面通知标题)、body(桌面通知的主体内容,注意不对html进行转义,只是字符串)、icon(桌面通知左边的logo)、dir(主体内容的水平书写顺序)。
Notification有onclick事件、onerror事件、onshow事件、close()事件。可以使用setInterval或者setTimeout定时器对桌面通知的消失事件进行操控,可在其他的事件中对桌面通知进行交互。
本次实现的是页面初始化的时候请求用户是否允许显示桌面通知,若允许则显示,若不允许则不显示。在显示桌面通知后,用户可手动关闭,若用户不关闭,则5秒钟之后自行关闭,当用户点击桌面通知时实现打开当前页面并刷新。

可以直接运行的代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body>测试桌面通知,窗口小化效果更好。</body><script type="text/javascript">   document.addEventListener('DOMContentLoaded',function(){if(! ('Notification' in window) ){alert('Sorry bro, your browser is not good enough to display notification');return;}Notification.requestPermission(function(permission){var notification = new Notification("Here I am!",{body:'Thanks for clicking that button. Hope you liked.',icon:'',dir:'auto'});setTimeout(function() {    notification.close();//关闭桌面通知}, 5000);notification.onclick = function(){//点击桌面通知,模拟实现把用户小化的窗口大化并刷新notification.close();//关闭桌面通知var href = window.location.href;//获取当前页面的urlwindow.close();//将当前页面关闭window.open(href);//新开一个页面,url为当前页面}navigator.onerror = function(){//当有错误发生时会onerror函数会被调用console.log('桌面通知发生了错误');}navigator.onshow = function(){//消息框显示时会被调用console.log('桌面通知显示ing');}});});</script></html>


原创粉丝点击