空间管理您的位置: 51Testing软件测试网 » msnshow的个人空间 » 日志

十五年测试老手，长期负责WEB\APP 项目测试，目前主要负责团队管理工作。

html5 桌面提醒：Notifycations

上一篇 / 下一篇 2013-05-05 11:02:46 / 个人分类：其它

文章来源

文章来源:【转载】

d+KR6MS0s~ ^0 51Testing软件测试网$^;}b+[5?Q

HTML5中的桌面提醒（web notifications）可以在当前页面窗口弹出一个消息框，这个消息框是跨 Tab 窗口的，这在用户打开多个 tab 浏览网页时，提醒比较方便，容易让用户看到。目前实现这一功能的浏览器均以webkit为内核。51Testing软件测试网@+_;o!QL$r G|

该功能在 chrome 下需要以 http 方式打开网页才能启用。51Testing软件测试网koQd-`s8`

51Testing软件测试网UQj|%F)S

桌面提醒功能由 window.webkitNotifications 对象实现。51Testing软件测试网7uOTdM

window.webkitNotifications 对象没有属性，有四个方法：

1.requestPermission()

　　该方法用于向用户申请消息提醒权限，如果当前没有开放该权限，浏览器将弹出授权界面，用户授权后，在对象内部产生一个状态值（一个0、1或 2 的整数）：

0：表示用户同意消息提醒，只在该状态下可以使用信息提醒功能；

1：表示默认状态，用户既未拒绝，也未同意；51Testing软件测试网h3Y7f7ZJaE

2：表示用户拒绝消息提醒。51Testing软件测试网PB%N)EHpH7R

2.checkPermission()

　　这个方法用于获取 requestPermission() 申请到的权限的状态值。

51Testing软件测试网5n7w6LHFj)px

3.createNotification()

　　这个方法以纯消息的方式创建提醒消息，它接受三个字符串参数：

iconURL：在消息中显示的图标地址,

title：消息的标题，

body：消息主体文本内容

该方法会返回一个 Notification对象，可以针对这个对象做更多的设置。

51Testing软件测试网1TYny-S
51Testing软件测试网Hb!D)p7V,z k

Notification 对象的属性与方法：

51Testing软件测试网Bz^'`d$^

dir:"" 51Testing软件测试网 i?6_7U*Qc~
51Testing软件测试网5Y+H`vYaI^
onclick:null
onclose:null
j-HJtm3DB\)P0
ondisplay:function (event) {51Testing软件测试网'q^/vqW
onerror:null51Testing软件测试网dZ2Ge3w
onshow:null
h$SL.DY7P"W0
replaceId:""51Testing软件测试网"_)U*z8B/Fa}
tag:""
)V)ap3gU$mE9M;}0
__proto__:Notification
!n,` g&lZ3vs0
addEventListener:function addEventListener() { [native code] }
"f`:oq EZ2F.S_X0
cancel:function cancel() { [native code] }
w)u7W&I`0
close:function close() { [native code] }
*[-N}ya8E#A0
constructor:function Notification() { [native code] }
.Y~ \#uL-p0H(G0
dispatchEvent:function dispatchEvent() { [native code] }51Testing软件测试网J;J0t:xWB [
removeEventListener:function removeEventListener() { [native code] }51Testing软件测试网a;W ql0F L
show:function show() { [native code] }
Tg)q YtF0
__proto__:Object
5}_G QI8qPF0

51Testing软件测试网xp-d9AXjIz

　　dir：设置消息的排列方向，可取值为“auto”(自动), “ltr”(left to right), “rtl”(right to left)。

　　tag：为消息添加标签名。如果设置此属性，当有新消息提醒时，标签相同的消息只显示在同一个消息框，后一个消息框会替换先前一个，否则出现多个消息提示框，但是最多值显示3个消息框，超过3个，后继消息通知会被阻塞。

　　onshow：当消息框显示的时候触发该事件；

　　onclick：当点击消息框的时候触发该事件；

　　onclose：当消息关闭的时候触发该事件；

　　onerror：当出现错误的时候触发该事件；51Testing软件测试网0]A,?6r:c

方法：

　　addEventListener && removeEventListener：常规的添加和移除事件方法；

　　show：显示消息提醒框；

　　close：关闭消息提醒框；51Testing软件测试网+s%o)CE2^

　　cancel：关闭消息提醒框（似乎和 close一样）；51Testing软件测试网)~R(bZW0]b|

sXrw9C#bB0

4.createHTMLNotification()

　　该方法与 createNotification() 不同的是，他以HTML方式创建消息，接受一个参数： HTML 文件的URL，该方法同样返回 Notification对象。

51Testing软件测试网3lY*u`Z M@

51Testing软件测试网0Ig+YK|

一个实例：

<!DOCTYPE HTML>
1\ nOn8a0<html>
<head>
'H2Z-tE.b(T0    <title>notifications in HTML5</title>
"mU{LxX0</head>
U+F.}4E"@ Y#\Gn0<body>     51Testing软件测试网lG0e*m A*l{
    <form>  51Testing软件测试网'~"o~I$U
        <input id="trynotification" type="button" value="Send notification" />
Q1F6O x/__-t0    </form>
.z6O`L/{jLE0
    <script type="text/javascript">
U7d N&}mU051Testing软件测试网N%t7|Mi6m
        document.getElementById("trynotification").onclick = function(){51Testing软件测试网wLvC5_.^
            notify(Math.random());51Testing软件测试网$_3b'QKh#yE
        };
6T&a1`Wu2u1E0
        function notify(tab) {  51Testing软件测试网 ZGeXa7{3c
            if (!window.webkitNotifications) {
bw y{ nn0                return false;
F_7x S4dW(F7p2V0            }
&D.o M.ny3vE7C%v0
KCL"g6K/A0            var permission = window.webkitNotifications.checkPermission();  51Testing软件测试网,td%m5|!u!{\
            if(permission!=0){                   51Testing软件测试网D:Gs z/a}:@
                window.webkitNotifications.requestPermission(); 51Testing软件测试网,H3c8_)o-A
                var requestTime = new Date();51Testing软件测试网5W.L P.e5{"s
                var waitTime = 5000;  51Testing软件测试网,i3V Fq Py
                var checkPerMiniSec = 100;
5r(FwP'n,K0                setTimeout(function(){
-v0}`3kM%A$} L0                    permission = window.webkitNotifications.checkPermission();
                    if(permission==0){
u7_@4A"C)y6w$`6e0                        createNotification(tab);
9_/iuH+uzWFA7f0                    }else if(new Date()-requestTime<waitTime){
                        setTimeout(arguments.callee,checkPerMiniSec);51Testing软件测试网6F"]+o$sn1xP @
                    }51Testing软件测试网8d\ID3X,_G
                },checkPerMiniSec);51Testing软件测试网QR3tU1yU0c
            }else if(permission==0){
&pr)R.j)G0                createNotification(tab);51Testing软件测试网*R7DV F2o
            }
tM:w,Itd"fNB3j$T0        }
'ha&Lw] ^:u0
         function createNotification(tab){51Testing软件测试网zr]g'o
                var showSec = 10000;  51Testing软件测试网@ti'd2K
                var icon = "http://tech.baidu.com/resource/img/logo_news_137_46.png";  51Testing软件测试网s1V%fkl"c#g
                var title = "[" + new Date().toLocaleTimeString() + "] close after " + (showSec/1000) + " seconds";
d;b UT9PT/N8O0                var body =  "hello world, i am webkitNotifications informations";
/~ ?0F xDDd0
&r'C+|AH_C)Y8v%e0                var popup = window.webkitNotifications.createNotification(icon, title, body);
4M5|[sV:SQ0                popup.tag = tab;
]'W;~moW&RC0                popup.ondisplay = function(event) {
                    setTimeout(function() {
~o+H0S0r;}/`M7U0                        event.currentTarget.cancel();
0IQ1\5Duh/f']2u0                    }, showSec);
R8gS,_JL0                }  51Testing软件测试网+^1`lz Wx
                popup.show();
z J;CFdn%p0BQ0        }
51Testing软件测试网L!sO-Y\S
    </script>
-cT'o l:[8x0
(\C*irS/D.A0c `0</body>  51Testing软件测试网F#f'r9s5Vu
</html>

用户菜单

标题搜索

日历

数据统计

访问量: 1693686
日志数: 556
图片数: 1
文件数: 3
书签数: 8
建立时间: 2007-06-08
更新时间: 2023-01-07

html5 桌面提醒：Notifycations

文章来源

相关阅读:

用户菜单

我的栏目

标题搜索

日历

我的存档

数据统计

RSS订阅