什么是Notifications？

百变鹏仔 2个月前 (10-18) #H5教程

文章标签 Notifications

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

<html><head><meta charset="utf-8"><title>HTML5 - Notifications</title><script>//判断浏览器是否支持Notificationsfunction supported(){if(window.webkitNotifications){	alert(&#39;浏览器支持Notifications&#39;);} else {	alert(&#39;浏览器不支持Notifications&#39;);}}//请求桌面通知权限function requestPermission() {window.webkitNotifications.requestPermission();}//获取请求权限状态function checkPermission() {switch (window.webkitNotifications.checkPermission()) {	case 0:alert(&#39;用户已允许显示桌面通知&#39;);break;	case 1:alert(&#39;用户还没有允许或拒绝显示桌面通知&#39;);break;	case 2:alert(&#39;用户已拒绝显示桌面通知&#39;);break;}}//创建文本消息function textMsg(){var icon = &#39;logo.png&#39;;var title = &#39;阿鹏\&#39;s BLOG&#39;;var body =  &#39;http://www.1990c.com&#39;;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(&#39;msg.html&#39;);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？

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集