您的位置：首页 > Web前端

前端js实现桌面通知

2017-06-13 11:39 197 查看

前端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;//获取当前页面的url
window.close();//将当前页面关闭
window.open(href);//新开一个页面，url为当前页面
}
navigator.onerror = function(){
//当有错误发生时会onerror函数会被调用
console.log('桌面通知发生了错误');
}
navigator.onshow = function(){
//消息框显示时会被调用
console.log('桌面通知显示ing');
}
});
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 桌面通知前端

相关文章推荐

新的分享

章节导航