HTML5的Notifycations怎么应用

今天小编给大家分享一下HTML5的Notifycations怎么应用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

HTML5中的桌面提醒（网络通知）可以在当前页面窗口上放置一个消息框，这个消息框是跨Tab窗口的，这在用户打开多个tab浏览网页时，提醒比较方便，容易让用户看到。只要是webkit内核支持该功能。

该功能在chrome下需要以http方式打开网页才能

启用。桌面提醒功能由window.webkitNotifications对象实现（webkit内核）

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

1.requestPermission（）

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

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

1：表示状态，用户既未拒绝，也未同意；

2：表示用户拒绝消息提醒

2.checkPermission（）

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

3.createNotification（）

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

iconURL：消息在显示中的图标种植地址，

标题：消息的标题，

body：消息主体文本内容

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

对象的属性与方法：

复制代码代码如下：

DIR： ""

的onclick：空

的OnClose：空

ondisplay：功能（事件）{

的onerror：空

OnShow中：空

replaceId： ""

标签： ""

__ PR oto__：通知

的addEventListener：功能的addEventListener（）{[本地代码]}

取消：函数cancel（）{[本机代码]}

close：函数close（）{[本机代码]}

构造函数：函数Notification（）{[本机代码]}

dispatchEvent：函数dispatchEvent（）{[本机代码]}

removeEventListener：函数removeEventListener （）{[本机代码]}

show：函数show（）{[本机代码]}

__proto__：对象

dir：设置消息的分配方向，可取到" auto"（自动），" ltr"（从左到右），" rtl"（从右到左）。

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

　　OnShow中：当消息框显示的时候触发该事件;

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

　　OnClose中：当消息关闭的时候触发该事件;

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

方法：

　　addEventListener && removeEventListener：常规的添加和

　　删除事件方法；显示：显示消息提醒框；

　　关闭：关闭消息提醒框；

　　取消：关闭消息提醒框，和close一样；

4.createHTMLNotification（）

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

一个实例：

复制代码代码如下：

<！DOCTYPE HTML>