在执行完以上代码后,我们就成功地创建了一个消息框实例,在Chrome下面它最终会显示成这样:

到这里我们已经成功了一半,但能不能正确地显示出这个消息框,最终还取决于用户的授权。鉴于浏览器的安全机制,只有用户同意网页弹出消息通知框,消息通知才能够真正的显示出来。所以现在我们要做的就是申请用户授权。

Notification类提供了一个requestPermission方法,用来请求用户授权,代码如下:

Notification.requestPermission(function (permission) {
  console.log(permission);
  popNotice();
});

温馨提示:用户一旦没有授权,拒绝,以上方法将不再执行!

示例demo

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>桌面消息</title>
</head>
<body>
<!--JS代码:-->
<script type="text/javascript">
// 判断是否支持Notification
if (window.Notification) {
//Notification 方法
var popNotice = function () {
var notification = new Notification("Hi,帅哥:", {
body: '可以加你为好友吗?', //显示消息的内容
icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg' //显示消息的缩略图
}); //消息框被点击时被调用
//可以打开相关的视图,同时关闭该消息框等操作
notification.onclick = function () {
notification.close();
}; //5秒后关闭消息框
notification.onshow = function () {
setTimeout(function () {
notification.close();
}, 5000);
};
}; if (Notification.permission == "granted") { //授权
popNotice();
} else if (Notification.permission != "denied") { //没有授权时询问
Notification.requestPermission(function (permission) {
console.log(permission);
popNotice();
});
}
} else {
alert('浏览器不支持Notification');
}
</script> </body>
</html>

HTML5新特性[ Notifications ] 桌面消息的更多相关文章

  1. html5新特性与用法大全了解一下

    有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...

  2. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  3. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  4. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  5. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  6. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  7. HTML5新特性:FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

  8. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  9. HTML5新特性:范围样式

    原文出处:http://blog.csdn.net/hfahe/article/details/7381141        Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...

随机推荐

  1. 洛谷P4281 紧急会议

    传送门啦 思路: $ Lca $ 这个题要求这个显而易见吧.但是难就难在怎么在树上利用 $ Lca $ 去解决三个点的问题. 首先明确三个点两两的 三个 $ Lca $ 中有一对是相等的,我们也会发现 ...

  2. java多线程快速入门(十五)

    使用violate关键字解决了变量的可见性问题(volatile让多线程刷新falg的值) package com.cppdy; class MyThread11 extends Thread { / ...

  3. ctype

    original:http://www.runoob.com/cprogramming/c-standard-library-ctype-h.html 下面列出了头文件 ctype.h 中定义的函数: ...

  4. 基于GTID环境的数据恢复

    下面说一个线上环境的数据恢复案例,线上环境误操作的事情,随时都有可能发生的,这时候运维DBA或者DBA会想,没人会傻到把数据库干掉的吧?又或者没有会闲得蛋痛删除了几条数据又想恢复这么无聊吧?适适这样的 ...

  5. python 全栈开发,Day76(Django组件-cookie,session)

    昨日内容回顾 1 json 轻量级的数据交换格式 在python 序列化方法:json.dumps() 反序列化方法:json.loads() 在JS中: 序列化方法:JSON.stringfy() ...

  6. DFMZ-开发过程中遇到的错误-01

    未能加载文件或程序集“H2F, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null”或它的某一个依赖项.试图加载格式不正确的程序. 原因分析:由 ...

  7. 配置CenOS网络,并用Xshell链接。

    首先输入 cd /etc/sysconf ig/network-scripts/ 然后回车 输入ls 然后回车 输入 vi ifcfg-eth0  然后回车 按下esc键,然先后按下U,I键把光标用键 ...

  8. canvas图像保存

    很多时候绘制完成的图片需要保存,那么我们就可以使用到Canvas API来完成这最后一步! Canvas API使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载,然后我们 ...

  9. java利用Jsch实现在windows平台远程操作linux服务器

    说明:exec用于执行命令:sftp用于文件处理 package com.wyg.simple; import java.io.BufferedReader; import java.io.File; ...

  10. Codeforces 295C Greg and Friends BFS

    Greg and Friends BFS的过程中维护一下方案数. 我个人感觉不是很好想, 但是写出来之后怎么感觉这题这么SB啊啊. #include<bits/stdc++.h> #def ...