HTML5 桌面通知 new Notification

栏目列表

<html>
 
	<head>
		<meta charset="UTF-8">
		<title>H5通知功能 </title>
	</head>
 
	<body>
		<script type="text/javascript">
			// 调用通知方法
			showMsgNotification('状态更新提醒','你的朋友圈有3条新状态，快去查看吧');
			/**
			 * H5通知功能 
			 */
			function showMsgNotification(out_title, out_msg) {
				var title = out_title ? out_title : '更新状态标题';
				var options = {
					body: out_msg ? out_msg : "更新状态内容", // 通知主体
					requireInteraction: true, // 不自动关闭通知
					icon: 'http://img18.house365.com/newcms/2017/03/16/148964317858ca26aacf7b5.jpg', // 通知图标 
					tag: 'hangge',
				};
				var Notification = window.Notification || window.mozNotification || window.webkitNotification; // 浏览器做兼容处理
				if(Notification) { //支持桌面通知
					if(Notification.permission == "granted") { //已经允许通知
						instance_init(title, options);
					} else {
						//第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)
						Notification.requestPermission(function(status) {
							if(status === "granted") { //用户允许
								instance_init(title, options);
							} else { //用户禁止
								console.log('禁止')
								return false
							}
						});
					}
					/**
					 * Notification定义
					 * */
					function instance_init(title, options){
						var instance = new Notification(title, options);
						instance.onclick = function() {
							console.log('onclick');
							// 关闭通知
							instance.close();
						};
						instance.onerror = function() {
							console.log('onerror');
						};
						instance.onshow = function() {
							console.log('onshow');
						};
						instance.onclose = function() {
							console.log('onclose');
						};
					}
				} else { //不支持(IE等)
					console.log("不支持的浏览器")
				}
			}
		</script>
	</body>
 
</html>

发布者：songJian 点击数：138 发布时间：2022-12-18 14:09:56 更新时间：2022-12-18 14:09:56

栏目列表

推荐阅读

HTML5 桌面通知 new Notification

相关文章