HTML5实现浏览器的桌面通知 （兼容性多个浏览器）

发表于 分类于 阅读次数：

HTML5实现浏览器的桌面通知 （兼容性多个浏览器）

提示：需要在服务器上运行才会有效果，直接运行代码是没有效果的

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script type="text/javascript">
	/*
	 * 桌面通知
	 * strNewsContent:通知的内容
	 */
	function windowsNotify(strNewsContent) {
		if (!("Notification" in window) && !window.webkitNotifications && window.webkitNotifications.checkPermission() != 0)
			return;

		if (Notification.permission == null || Notification.permission == undefined)
			windowsNotify360(strNewsContent);
		else if (Notification.permission === "granted")
			windowsNotifyFFAndGE(strNewsContent);
		else if (Notification.permission !== 'denied') {
			Notification.requestPermission(function (permission) {
				if (!('permission' in Notification))
					Notification.permission = permission;

				if (permission === "granted")
					windowsNotifyFFAndGE(strNewsContent);
			});
		}
	}

	//桌面通知(兼容360)
	function windowsNotify360(strNewsContent) {
		if (window.webkitNotifications && window.webkitNotifications.checkPermission() == 0) {
			var notify = window.webkitNotifications.createNotification(
			    "http://www.fx678.com/corp/images/aboutus/htw.jpg",
		            '汇通-新闻中心',
			    strNewsContent
		    );

			//设置定时撤销机制，防止通知长时间显示不被关闭
			notify.ondisplay = function (event) {
				setTimeout(function () {
					event.currentTarget.cancel();
				}, 10000);
			};
			//下面是定义点击事件，类似地还可定义其它事件
			notify.onclick = function () {
				window.focus();
				this.cancel();
			};
			//弹出
			notify.show();
		} else if (window.webkitNotifications) {
			window.webkitNotifications.requestPermission(windowsNotify360);
		}
	}


	//桌面通知(兼容火狐、谷歌)
	function windowsNotifyFFAndGE(strNewsContent) {
		var notification = new Notification('汇通-新闻中心',
							 {
							 	body: strNewsContent,
							 	icon: "http://www.fx678.com/corp/images/aboutus/htw.jpg"
							 });

		//设置定时撤销机制，防止通知长时间显示不被关闭
		notification.ondisplay = function (event) {
			setTimeout(function () {
				event.currentTarget.cancel();
			}, 10000);
		};

		//下面是定义点击事件，类似地还可定义其它事件
		notification.onclick = function () {
			window.focus();
			this.cancel();
		};
		console.log(notification);
	}
	windowsNotify('asdsd');

</script>