js实现通知弹屏 Notification

最新推荐文章于 2025-05-21 15:13:17 发布

原创最新推荐文章于 2025-05-21 15:13:17 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

js 专栏收录该内容

75 篇文章

订阅专栏

本文介绍了如何在Web应用中利用JavaScript实现通知功能。当用户允许权限后，代码会创建并显示通知，包括文字方向、内容等属性。请注意，这个功能只在本地环境或HTTPS网站上有效，并且需要用户的许可。

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

样式

![在这里插入图片描述](https://img-blog.csdnimg.cn/2d6a15c466b7454ab2c1bfe38825d4eb.png

实现代码

let notification;
// 可能的值包括：denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择，所以浏览器的行为与 denied 时相同).
if (window.Notification && Notification.permission === 'granted') {
	notification = new Notification('您有一条新的来电', {
		dir: 'rtl', //dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左）
		body: `程序员正在等待服务`//body: 通知中额外显示的字符串
		// icon: img  一个图片的URL，将被用于显示通知的图标。
		// tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。
	});
} else if (Notification.permission !== 'denied') {
	Notification.requestPermission().then(function(permission) {
		// 如果用户接受权限，我们就可以发起一条消息
		if (permission === 'granted') {
			notification = new Notification('您有一条新的来电', {
				dir: 'rtl',
				body: `程序员正在等待服务`
				// icon: img
			});
		}
	});
}
if (notification) {
	notification.onclick = () => {
		window.focus();
		// 点击之后触发方法
	};
}