HTML5新特性[ Notifications ] 桌面消息
在执行完以上代码后，我们就成功地创建了一个消息框实例，在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 ] 桌面消息的更多相关文章
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
- HTML5新特性 websocket(重点)--多对多聊天室
一.html5新特性 websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- HTML5新特性：FileReader 和 FormData
连接在这里: HTML5新特性:FileReader 和 FormData
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- HTML5新特性：范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
随机推荐
- CSS三：CSS的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
- linux java报错汇总
一:♦linux 下javac 编译报 需要class, interface 或enum错误 ♦解析时已到达文件结尾 原因:大括号补匹配 //注意看报警提示
- 性能测试三十六：内存溢出和JVM常见参数及JVM参数调优
堆内存溢出: 此种溢出,加内存只能缓解问题,不能根除问题,需优化代码堆内存中存在大量对象,这些对象都有被引用,当所有对象占用空间达到堆内存的最大值,就会出现内存溢出OutOfMemory:Java h ...
- 性能测试二十九：Dubbo框架测试脚本编写
测试脚本编写 新建一个folder命名为lib,用于存放依赖包 把以下jar全部拷进lib下,并build path 找开发要 真正要测试的以jar包形式存在的代码的类, 打开看一下 放到lib并bu ...
- kafka删除topic数据
一.概述 生产环境中,有一个topic的数据量非常大.这些数据不是非常重要,需要定期清理. 要求:默认保持24小时,某些topic 需要保留2小时或者6小时 二.清除方式 主要有3个: 1. 基于时间 ...
- SSD（single shot multibox detector）算法及Caffe代码详解[转]
转自:AI之路 这篇博客主要介绍SSD算法,该算法是最近一年比较优秀的object detection算法,主要特点在于采用了特征融合. 论文:SSD single shot multibox det ...
- [HEOI2016/TJOI2016]序列
题解: 很水的题目 首先容易发现每个位置实际上只有最大值是有用的 然后把条件变成dp[i]=max(dp[j]+1)(j<i,F[i]>G[j],G[i]>H[j]) 然后我研究了一 ...
- 082 HBase的几种调优（GC策略，flush，compact，split）
一:GC的调优 1.jvm的内存 新生代:存活时间较短,一般存储刚生成的一些对象 老年代:存活时间较长,主要存储在应用程序中生命周期较长的对象 永久代:一般存储meta和class的信息 2.GC策略 ...
- 缓存击穿、缓存失效及热点key的解决方案
分布式缓存是网站服务端经常用到的一种技术,在读多写少的业务场景中,通过使用缓存可以有效地支撑高并发的访问量,对后端的数据库等数据源做到很好地保护.现在市面上有很多分布式缓存,比如Redis.Memca ...
- <script type="text/x-template"> 模板
获取动态的js模板可以用art-template插件 <script type="text/template"> 给<script>设置type=" ...