HTML5的Notifycations怎么应用

发布时间：2022-03-09 10:59:22 作者：iii
来源：亿速云阅读：146

今天小编给大家分享一下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>

<html>

<head>

</ head>

<body>

<form>

</ form>

document.getElementById（“ trynotification”）。onclick = function（）{

notify（Math.random（））;

};

函数notify（tab）{

如果（！window.webkitNotifications）{

返回false；

}

varPermission = window.webkitNotifications.checkPermission（）;

if（permission！= 0）{

window.webkitNotifications.requestPermission（）;

var requestTime = new Date（）;

var waitTime = 5000;

var checkPerMiniSec = 100;

setTimeout（function（）{

权限= window.webkitNotifications.checkPermission（）;

if（permission == 0）{

createNotification（tab）;

}否则if（new Date（）-requestTime <waitTime）{

setTimeout（arguments.callee，checkPerMiniSec ）;

}

}，checkPerMiniSec）;

}否则if（permission == 0）{

createNotification（tab）;

}

函数createNotification（tab）{

var showSec = 10000;

var icon =“ http://tech.baidu.com/resource/img/logo_news_137_46.png”;

var title =“ [” + new Date（）。toLocaleTimeString（）+“]在” +（showSec / 1000）+“秒”之后关闭；

var body =“你好，世界，

var popup = window.webkitNotifications.createNotification（icon，title，body）;

popup.tag =选项卡;

popup.ondisplay = function（event）{

setTimeout（function（）{

event.currentTarget.cancel（）;

}，showSec）;

}

popup.show（）;

}

</ script>

</ body>

</ html>

以上就是“HTML5的Notifycations怎么应用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。

HTML5的Notifycations怎么应用

相关阅读