• 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>
    复制代码
  • 相关阅读:
    php 小知识随手记 new self() 和new static()作用和区别
    静态页面制作:16结构与表现分离
    静态页面制作:15标签样式初始化
    静态页面制作:14综合实践
    静态页面制作:13padding的用法
    静态页面制作:12盒模margin特殊情况
    静态页面制作:11盒子模型
    通过JavaScript实现打印页面
    静态页面制作:10样式实战
    Handsontable-一款仿 Excel 的效果的表格插件使用总结
  • 原文地址:https://www.cnblogs.com/pangguoming/p/10238684.html
Copyright © 2020-2023  润新知