在执行完以上代码后，我们就成功地创建了一个消息框实例，在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. Eclipse通过jdbc连接sqlserver2008数据库的两种方式

    数据库登录身份验证方式有两种     其中服务器名称即为安装SQLServer2008的电脑,充当数据库服务器,在笔者这里就是自己的电脑名称. 身份验证方式有两种:windows身份验证和SQLSer ...

  2. poj2352树状数组解决偏序问题

    树状数组解决这种偏序问题是很厉害的! /* 输入按照y递增,对于第i颗星星,它的level就是之前出现过的星星中,横坐标小于i的总数 */ #include<iostream> #incl ...

  3. python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  4. DBMS_OUTPUT包学习

    DBMS_OUTPUT包中的其他方法和函数的用法,所以这次特地来研究一下. 先简单的讲解一下这个包的所有procedure的含义及作用:  -----------------------     1. ...

  5. J 判断二叉树每个结点的权值是否关于根节点完全对称

    如果二叉树每个结点的权值关于根节点完全对称 就输出Yes Sample Input 27 //结点1 2 3 //结点1的左孩子是结点2 右孩子是结点32 4 53 6 74 0 05 0 06 0 ...

  6. MockMvc 对 Spring Boot 进行单元测试

    import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.ann ...

  7. [HAOI2016]放棋子

    题解: 刚开始没有仔细看题目.. 后来发现障碍是每行每列有且只有一个 那么其实会发现这就是一道错排的题目 f[i]=(n-1)*(f[i-1]+f[i-2])

  8. 第八章| 2. MySQL数据库|数据操作| 权限管理

    1.数据操作 SQL(结构化查询语言),可以操作关系型数据库 通过sql可以创建.修改账号并控制账号权限:  通过sql可以创建.修改数据库.表:  通过sql可以增删改查数据: 可以通过SQL语句中 ...

  9. Redis数据结构之set

    一:介绍 1.set结构 没有顺序 并且,不允许出现重复的元素. 二:Redis客户端的常用命令 1.添加 2.查看数据 3.删除数据 4.是否存在某个值 1代表有,0代表无. 5.查看差值 有key ...

  10. POJ 2318 TOYS (叉乘判断)

    <题目链接> 题目大意: 给出矩形4个点和n个挡板俩顶点的位置,这n个挡板将该矩形分成 n+1块区域,再给你m个点的坐标,然你输出每个区域内有几个点. 解题思路: 用叉乘即可简单判断点与直 ...