- <!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>
来源: http://www.phpxs.com/code/1007810/