摘要:HTML5中的桌面提醒(web notifications)可以在当前页面窗口弹出一个消息框,这个消息框是跨 Tab 窗口的,这在用户打开多个 tab 浏览网页时,提醒比较方便,容易让用户看到。希望阅读本篇文章以后大家有所收获,帮助大家对HTML5的理解更加深入。
HTML5中的桌面提醒(web notifications)可以在当前页面窗口弹出一个消息框,这个消息框是跨 Tab 窗口的,这在用户打开多个 tab 浏览网页时,提醒比较方便,容易让用户看到。目前只要是 webkit 内核支持该功能。
该功能在 chrome 下需要以 http 方式打开网页才能启用。
桌面提醒功能由 window.webkitNotifications 对象实现(webkit内核)。
window.webkitNotifications 对象没有属性,有四个方法:
1.requestPermission()
该方法用于向用户申请消息提醒权限,如果当前没有开放该权限,浏览器将弹出授权界面,用户授权后,在对象内部产生一个状态值(一个0、1或 2 的整数):
0:表示用户同意消息提醒,只在该状态下可以使用信息提醒功能;
1:表示默认状态,用户既未拒绝,也未同意;
2:表示用户拒绝消息提醒。
2.checkPermission()
这个方法用于获取 requestPermission() 申请到的权限的状态值。
3.createNotification()
这个方法以纯消息的方式创建提醒消息,它接受三个字符串参数:
iconURL:在消息中显示的图标地址,
title:消息的标题,
body:消息主体文本内容
该方法会返回一个 Notification对象,可以针对这个对象做更多的设置。
Notification 对象的属性与方法:
代码如下:
dir: "" onclick: null onclose: null ondisplay: function (event) { onerror: null onshow: null replaceId: "" tag: "" __proto__: Notification addEventListener: function addEventListener() { [native code] } cancel: function cancel() { [native code] } close: function close() { [native code] } constructor: function Notification() { [native code] } dispatchEvent: function dispatchEvent() { [native code] } removeEventListener: function removeEventListener() { [native code] } show: function show() { [native code] } __proto__: Object
dir:设置消息的排列方向,可取值为“auto”(自动), “ltr”(left to right), “rtl”(right to left)。
tag:为消息添加标签名。如果设置此属性,当有新消息提醒时,标签相同的消息只显示在同一个消息框,后一个消息框会替换先前一个,否则出现多个消息提示框,但是最多值显示3个消息框,超过3个,后继消息通知会被阻塞。
onshow:当消息框显示的时候触发该事件;
onclick: 当点击消息框的时候触发该事件;
onclose:当消息关闭的时候触发该事件;
onerror:当出现错误的时候触发该事件;
方法:
addEventListener && removeEventListener:常规的添加和移除事件方法;
show:显示消息提醒框;
close:关闭消息提醒框;
cancel:关闭消息提醒框,和 close一样;
4.createHTMLNotification()
该方法与 createNotification() 不同的是,他以HTML方式创建消息,接受一个参数: HTML 文件的URL,该方法同样返回 Notification对象。
一个实例:
代码如下:
<!DOCTYPE HTML> <html> <head> <title>notifications in HTML5</title> </head> <body> <form> <input id="trynotification" type="button" value="Send notification" /> </form> <script type="text/javascript"> document.getElementById("trynotification").onclick = function(){ notify(Math.random()); }; function notify(tab) { if (!window.webkitNotifications) { return false; } var permission = window.webkitNotifications.checkPermission(); if(permission!=0){ window.webkitNotifications.requestPermission(); var requestTime = new Date(); var waitTime = 5000; var checkPerMiniSec = 100; setTimeout(function(){ permission = window.webkitNotifications.checkPermission(); if(permission==0){ createNotification(tab); }else if(new Date()-requestTime<waitTime){ setTimeout(arguments.callee,checkPerMiniSec); } },checkPerMiniSec); }else if(permission==0){ createNotification(tab); } } function createNotification(tab){ var showSec = 10000; var icon = "//tech.baidu.com/resource/img/logo_news_137_46.png"; var title = "[" + new Date().toLocaleTimeString() + "] close after " + (showSec/1000) + " seconds"; var body = "hello world, i am webkitNotifications informations"; var popup = window.webkitNotifications.createNotification(icon, title, body); popup.tag = tab; popup.ondisplay = function(event) { setTimeout(function() { event.currentTarget.cancel(); }, showSec); } popup.show(); } </script> </body> </html>
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML5/CSS3频道,获取更多WEB前端知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号