今天小编给大家分享一下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>
<title> HTML5中的通知</ title>
</ head>
<body>
<form>
<input id =“ trynotification” type =“ button” value =“发送通知” / >
</ form>
<script type =“ text / javascript”>
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怎么应用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
