html5 桌面提醒：Notifycations应用介绍

更新时间:2023-04-03 07:04:59 阅读：评论：0

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

onclo: null

ondisplay: function (event) {

onerror: null

onshow: null

replaceid: “”

tag: “”

__proto__: notification

addeventlistener: function addeventlistener() { [native code] }

cancel: function cancel() { [native code] }

clo: function clo() { [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：当点击消息框的时候触发该事件；

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

　　onerror：当出现错误的时候触发该事件；

方法：

　　addeventlistener && removeeventlistener：常规的添加和移除事件方法；

　　show：显示消息提醒框；

　　clo：关闭消息提醒框；

　　cancel：关闭消息提醒框，和 clo一样；

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=”nd notification” />

</form>

<script type=”text/javascript”>

document.getelementbyid(“trynotification”).onclick = function(){

notify(math.random());

};

function notify(tab) {

if (!window.webkitnotificati醋的组词ons) {

return fal;

}

var permission = window.webkitnotifications.checkpermission();

if(permission!=0){

window.webkitnotifications.requestpermission();

var requesttime = new date();

var waittime = 5000;

var checkperminic = 100;

ttimeout(function(){

permission = window.webkitnotifications.checkpermission();

if(permission==0){

createnotification(tab);

}el if(new date()-requesttime<waittime){

ttimeout(arguments.callee,checkperminic);

}

},checkperminic);

}el if(permission==0){

createnotification(tab);

}

}

function createnotification(tab){

var showc = 10000;

var icon = “http://tech.baidu.com/resource/img/logo_ne时刻近义词ws_137_46.png”;

var title = “[” + new date().tolocaletimestring() + “] clo after ” + (showc/1000) + ” conds”;

var body = “hello world, i am webkitnotifications informations”;

var popup = window.webkitnotifications.createnotification(icon, title, body);

pop儿童英语故事up.tag = tab;

popup.ondisplay = function(event) {

ttimeout(function() {

event.currenttarget.cancel();

}, showc);

}

popup.show();

}

</script>

</body>

</html>