站长资讯网
最全最丰富的资讯网站

什么是Notifications?HTML5 Notifications桌面提醒

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>

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号