- 是否支持桌面提醒，请求权限，请求权限状态，显示文本消息，显示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.codesocang.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>
标签：网站源码