HTML5实现的Notifications桌面消息提醒功能

2024-09-05 12:19:10

字体：大中小

来源：转载

供稿：网友

是否支持桌面提醒，请求权限，请求权限状态，显示文本消息，显示HTML消息等，若弹出是否允许***在桌面背景出消息的提示，请选择允许，否则你看不到本款代码的效果。测试的浏览器需要支持Notifications，当然中会有判断。运行网页后会在右下角显示一个小图标，本例重点演示如何使用HTML5 Notifications。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML5 - Notifications弹出消息</title><script>//判断浏览器是否支持Notificationsfunction 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>

上一篇：HTML5实现端访问时禁止放大和缩小网页

下一篇：CSS3动画：利用 transition实现slideDown效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注