![61e6f8387e6764af16f7ef1caa0ca63b.png](https://i-blog.csdnimg.cn/blog_migrate/25b209b188d8cf577f806ff3430a2198.jpeg)
前言
前段时间接到一个需求,我们的web系统有电话接听功能。产品希望有电话呼入的时候,能够有效提示用户,无论用户是否在当前的系统页签上,甚至浏览器被最小化以后也能提醒用户。就着这个需求,我做了一些探索。
前端对用户的通知一般局限于页面之内,比如alert,confirm。或者js控制一个弹窗提醒用户。有些场景需要在页面之外通知用户,即当用户页签不在本页面,或者浏览器已经被收起来的情况。
本文介绍一些浏览器通知方式。
方法一:闪烁浏览器标题
利用document.title修改页签的标题,使用定时器来回切换内容实现标题闪烁,引起用户注意。
例子:
function sendNotificationFn(message, time) {
var oldTitle = document.title; // 保存原有标题
var changeVal = 1;
var notice = setInterval(function() {
if (changeVal) {
document.title = message;
changeVal = 0
} else {
document.title = oldTitle;
changeVal = 1
}
}, time || 1000);
return notice;
}
sendNotificationFn('有新的通知', 500);
// 中止通知
clearInterval(notice);
使用上述方法就可以不断闪烁title,引起用户的注意。方法会返回定时器,清除定时器重新设置title就可以恢复正常。
效果如图
![9edbb43ee86951daaae727d008294363.gif](https://i-blog.csdnimg.cn/blog_migrate/6db1a0313cbebc34e2536b5915012410.gif)
修改title是兼容性比较