HTML5如何实现⽹页消息通知提醒
在⽹页开发过程中，有时需要实现聊天功能，或者在⼀些⽹站跟咨询的时候，会看到⼀些消息通知的提⽰，常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。这⾥总结⼀下⾃⼰的实现⽅法
实现的效果：
当前窗体失焦的时候，标题开始闪动，当前窗体获取焦点的时候，则停⽌闪动。
并且在收到消息的同时右侧弹出消息通知。
实现标题闪烁需要⽤到窗⼝的获取焦点和失去焦点的⽅法，由于IE和其他Chrome及FireFox的区别，这⾥需要⽤到的⽅法就不⼀样，具体是：
Chrome和FireFox浏览器是window的onfocus, onblur⽅法；
⽽IE浏览器则是document的onfocusin, onfocusout⽅法；
实现通知提醒则需要⽤到questPermission⽅法
点击了允许后，则当前域名的⽹站就被允许在该电脑上出现通知弹框，以⾕歌浏览器为例，这时依次点击：设置——⾼级——⽹站设置——近期活动，就可以在允许下⾯看到刚才点击了允许通知的站点的地址，如图：
下⾯是代码展⽰：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的⽹页</title>
</head>
<body>
<h2>浏览器窗体获得焦点则停⽌标题闪烁通知+失去焦点则开启标题闪烁通知</h2>
<script>
//窗体失焦的时候，标题就会闪。
/
/这⾥有⼀个⼩的知识点，就是浏览器窗体获得焦点和失去焦点，Chrome和FireFox浏览器是window的onfocus, onblur⽅法；⽽IE浏览器则是document的onf ocusin, onfocusout⽅法，因此有：
var titleInit = document.title,
isShine =true;
setInterval(function(){
var title = document.title;
if(isShine ==true){
if(/新/.test(title)==false){
document.title ='【你有新消息】';
}else{
document.title ='【    　】';
}
}else{
document.title = titleInit;
}
},500);
// for Chrome and FireFox
isShine =false;
};
isShine =true;
};
/onblur和blur的区别
/ for IE
isShine =false;
};
isShine =true;
};
</script>
<script>
//实现右侧弹出消息通知
suportNotify()
}
//判断浏览器是否⽀持Web Notifications API
function suportNotify(){
if(window.Notification){
// ⽀持
console.log("⽀持"+"Web Notifications API");
//如果⽀持Web Notifications API，再判断浏览器是否⽀持弹出实例
showMess()
}else{
// 不⽀持
alert("不⽀持 Web Notifications API");
}
}
//判断浏览器是否⽀持弹出实例
function showMess(){
setTimeout(function(){
console.log('1：'+ Notification.permission);
//如果⽀持window.Notification 并且许可不是拒绝状态
if(window.Notification && Notification.permission !=="denied"){
//questPermission这是⼀个静态⽅法，作⽤就是让浏览器出现是否允许通知的提⽰
console.log('2: '+ status);
//如果状态是同意
if(status ==="granted"){
var m =new Notification('收到信息',{
body:'这⾥是通知内容！你想看什么客官？',//消息体内容
icon:"img1.baidu/it/u=3041604093,3909442121&fm=26&fmt=auto&gp=0.jpg"//消息图⽚});
window.focus();
}
}else{
alert('当前浏览器不⽀持弹出消息')
}
});
}
},1000)
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。