当前位置:Gxlcms > html代码 > 什么是Notifications?HTML5Notifications桌面提醒

什么是Notifications?HTML5Notifications桌面提醒

时间:2021-07-01 10:21:17 帮助过:30人阅读

Notifications是HTML5的一个新特性~ 可以看看360电脑抢票,也是用Notifications提示的~,下面小编写了一个HTML5 Notifications桌面提醒,还是挺不错的哦!<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>HTML5 - Notifications</title>
<script>
//判断浏览器是否支持Notifications
function supported(){
	if(window.webkitNotifications){
		alert('浏览器支持Notifications');
	} else {
		alert('浏览器不支持Notifications');
	}
}

//请求桌面通知权限
function requestPermission() {
	window.webkitNotifications.requestPermission();
}

//获取请求权限状态
function checkPermission() {
	switch (window.webkitNotifications.checkPermission()) {
		case 0:alert('用户已允许显示桌面通知');break;
		case 1:alert('用户还没有允许或拒绝显示桌面通知');break;
		case 2:alert('用户已拒绝显示桌面通知');break;
	}
}

//创建文本消息
function textMsg(){
	var icon = 'logo.png';
	var title = '阿鹏\'s BLOG';
	var body =  'http://www.1990c.com';
	var popup = window.webkitNotifications.createNotification(icon, title, body);

	popup.ondisplay = function(event) {
		setTimeout(function() {
			event.currentTarget.cancel();
		}, 5000);
	}

	popup.show();
}

//创建HTML消息
function htmlMsg(){
	var popup = window.webkitNotifications.createHTMLNotification('msg.html');

	popup.ondisplay = function(event) {
		setTimeout(function() {
			event.currentTarget.cancel();
		}, 5000);
	}

	popup.show();
}
</script>
</head>

<body>
<input type="button" value="是否支持桌面提醒" onclick="supported();"/>
<input type="button" value="请求权限" onclick="requestPermission();"/>
<input type="button" value="请求权限状态" onclick="checkPermission();"/>
<input type="button" value="显示文本消息" onclick="textMsg();"/>
<input type="button" value="显示HTML消息" onclick="htmlMsg();"/>
</body>
</html>

以上就是什么是Notifications?HTML5 Notifications桌面提醒的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行