HTML5如何实现网页消息通知提醒

在网页开发过程中，有时需要实现聊天功能，或者在一些网站跟在线客服咨询的时候，会看到一些消息通知的提示，常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。这里总结一下自己的实现方法

实现的效果：
当前窗体失焦的时候，标题开始闪动，当前窗体获取焦点的时候，则停止闪动。
并且在收到消息的同时右侧弹出消息通知。

实现标题闪烁需要用到窗口的获取焦点和失去焦点的方法，由于IE和其他Chrome及FireFox的区别，这里需要用到的方法就不一样，具体是：
Chrome和FireFox浏览器是window的onfocus, onblur方法；
而IE浏览器则是document的onfocusin, onfocusout方法；

实现通知提醒则需要用到Notification.requestPermission方法
Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示

点击了允许后，则当前域名的网站就被允许在该电脑上出现通知弹框，以谷歌浏览器为例，这时依次点击：设置——高级——网站设置——近期活动，就可以在允许下面看到刚才点击了允许通知的站点的地址，如图：

下面是代码展示：

<!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的onfocusin, 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 FireFoxwindow.onfocus = function() {isShine = false;};window.onblur = function() {isShine = true;};// for IEdocument.onfocusin = function() {isShine = false;};document.onfocusout = function() {isShine = true;};</script><script>//实现右侧弹出消息通知window.onload = function() {suportNotify()}//判断浏览器是否支持Web Notifications APIfunction 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") {//Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示Notification.requestPermission(function(status) {console.log('2: ' + status);//如果状态是同意if (status === "granted") {var m = new Notification('收到信息', {body: '这里是通知内容！你想看什么客官？', //消息体内容icon: "https://img1.baidu.com/it/u=3041604093,3909442121&fm=26&fmt=auto&gp=0.jpg" //消息图片});m.onclick = function() { //点击当前消息提示框后，跳转到当前页面window.focus();}} else {alert('当前浏览器不支持弹出消息')}});}}, 1000)}</script></body>
</html>

HTML5如何实现网页消息通知提醒相关推荐

这样设置定时消息通知提醒,重要的信息肯定不会错过
我们每天都要做很多事,但又难免会容易忘记这时我们就会定个闹钟或安装定时提醒APP和小程序啥的闹钟虽然方便,但是功能太单一了. 定时提醒APP虽有很多,但大多都还是要安装下载,部分还很臃肿花哨,提醒 ...
[经验教程]手机上微信新消息不提示也不显示微信消息通知怎么办？
微信来新消息手机上不提示也不显示新消息提醒通知,主要因为二个方便:一是微信设置新消息通知未启,另一个是手机微信应用未开通消息提醒通知.只要按下面的教程分别排查开启新消息通知即可恢复微信消息通知提醒正常 ...
html 消息通知功能,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
【VUE】浏览器消息通知（声音提醒，标题栏闪动，弹框提醒）
思路: 浏览器通知使用Notification,详情可查看Notification.Notification() 标题栏闪动利用循环实现声音提醒可以使用播放本地音频实现总结:在当前页面接收到消息时 ...
html5的消息通知
这里介绍一个HTML5的notification demo: <!DOCTYPE html> <html><head><meta charset=" ...
html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音
在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音. 这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在 ...
html在线消息,HTML5之消息通知的使用(Web Notification)
关于 HTML5 ,写了不少文章,总觉得相关的高级 API 都得过一遍.系统的了解,站在更高的高度去思考问题,这样才能事半功倍. 一.先睹为快我们先来尝试一个最简单的例子,打开 chrome 开发者 ...
python如何实现监听微信应用新消息通知中心弹窗提醒
可以使用第三方库如 itchat 来实现对微信应用新消息通知中心弹窗提醒的监听.首先需要安装 itchat,可以使用 pip 安装:pip install itchat.然后可以使用 itchat 提 ...
结合C++，网页实现消息即时提醒（桌面右下角弹窗）
吃饭的时候 ,突然有所感悟.欣喜若狂. 首先这个不是C++外框包含网页 , 避免webbrower与一些页面的操作的不兼容性. 就是不知道这么想的,我是不是第一个.不然也能称为是一个创新. 这个想法的 ...
win10提醒软件桌面消息通知怎么打开
我们在使用电脑工作的时候,会习惯把很多事项都记录在上面,方便随时打开查看.如果比较重视效率和专注度,也会使用软件设置提醒事项,让自己更加安心地应对眼前的工作,等到桌面出现提醒消息通知,再进行下一项任务 ...

HTML5如何实现网页消息通知提醒

HTML5如何实现网页消息通知提醒相关推荐

最新文章

热门文章