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

最新推荐文章于 2025-04-01 00:19:50 发布

Evan_鹿喑

最新推荐文章于 2025-04-01 00:19:50 发布

阅读量1.1w

点赞数 5

文章标签： javascript html5 web

本文链接：https://blog.csdn.net/qq_39077394/article/details/118998231

版权

本文档介绍如何在网页开发中实现在浏览器标签页标题闪烁以及屏幕右侧的消息通知功能，以提示用户有新的消息。针对Chrome、Firefox和IE浏览器的不同事件处理，以及利用Notification API请求用户权限进行通知提醒。当窗体失焦时，标题开始闪烁，窗体获取焦点时停止闪烁。同时，详细展示了相关JavaScript代码实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

实现标题闪烁需要用到窗口的获取焦点和失去焦点的方法，由于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 FireFox
			window.onfocus = function() {
				isShine = false;
			};
			window.onblur = function() {
				isShine = true;
			};

			// for IE
			document.onfocusin = function() {
				isShine = false;
			};
			document.onfocusout = function() {
				isShine = true;
			};
		</script>


		<script>
            //实现右侧弹出消息通知
			window.onload = function() {
				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") {
						//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>