• 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>
    复制代码
  • 相关阅读:
    css如何设置div中的内容垂直居中?
    有哪些sql优化工具
    XSS攻击
    java的HashSet 原理
    复杂度O(n)计算
    Kubernetes(K8s)基础知识(docker容器技术)
    Golang glog使用详解
    教你如何找到Go内存泄露【精编实战】
    Linux生产环境上,最常用的一套“AWK“技巧【转】
    Go 程序的性能监控与分析 pprof
  • 原文地址:https://www.cnblogs.com/pangguoming/p/10238684.html
Copyright © 2020-2023  润新知