脚本宝典收集整理的这篇文章主要介绍了html5桌面通知(Web Notifications)实例解析，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
htML5桌面通知(Web Notifications)对于需要实现在新消息入线时，有桌面通知效果的情况下非常有用，在此简单介绍一下这个html5的新属性。
这里有个不错的demo：html5 web notification demo
从上面这个demo中 我们就可以获取所需要的基本核心代码，如下：
<script>
VAR Notification = window.Notification || window.mozNotification || window.
webkitNotification;
Notification.request
PErmission(function (permission) {
// console.
LOG(permission);
});
function show() {
var instance = new Notification(
"
test t
ITle", {
body: " test message"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
};
instance.onclose = function () {
// Something to do
};
return false;
}
</script>
&nbs
p;其中：
Notification.requestPermission 这句代码的功能就是向用户请求权限允许。
通过以上的例子，基本思路我们已经有了，首先加载文档时，就向用户请求权限，获取权限后以后都so easy了。
window.addEventListener('load', function () {
// At
First, let's check if we have permission for notification
if (Notification
&& Notification.permission !
== "granted") {
Notification.requestPermission(function (
status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
});
}
});
火狐下 验证是通过的，但是在chrome下总是出不来，后来发现这样一段话
Not a Bug, Feature.
Desktop Notifications can only be trigge
red via a user action. Typing into the
JavaScript console has the s
ame effect as raw javascript code embedded into the web
page (no user action). Typing the javascript into the location bar, however,
re
PResents a user-action (the user is intentionally visiting a javascript link to
enable notifications, probably for sites t
hat tend to use
href="javascript：" instead
of onclick="".
I'm pretty sure this is a non
-issue.
原来在chrome下是必须要用户手动触发的，否则，chrome浏览器会无视这段的js
但是在我们网站里肯定不可能加一个按钮或者超链接来显式的让用户授权吧，好吧， 实际上这也不是个事情，我们可以在用户经常点的按钮上顺便处理下这个授权就好，在chrome下是一次授权终身有用。除非你进入设置把他禁了。
整合一下，代码如下：
function showMsgNotification(title, msg){
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
if (Notification && Notification.permission
=== "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
// console.log(instance.close);
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Something to do
};
}else if (Notification && Notification.permission !== "denied") {
Notification.requestPermission(function (status) {
if (Notification.permission !== status) {
Notification.permission = status;
}
// If the user s
aid okay
if (status === "granted") {
var instance = new Notification(
title, {
body: msg,
icon: "image_url"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
setTimeout(instance.close, 3000);
};
instance.onclose = function () {
// Something to do
};
}else {
return false
}
});
}else{
return false;
}
}
脚本宝典总结
以上是脚本宝典为你收集整理的html5桌面通知(Web Notifications)实例解析全部内容，希望文章能够帮你解决html5桌面通知(Web Notifications)实例解析所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。