欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

什么是Notifications?HTML5 Notifications桌面提醒

程序员文章站 2022-04-14 16:24:33
...

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桌面提醒的详细内容,更多请关注其它相关文章!

相关标签: Notifications,HTML5