zoukankan      html  css  js  c++  java
  • 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>
    复制代码
  • 相关阅读:
    @SerializedName注解
    信号量与互斥锁
    MySQL分配角色权限
    PO、VO、DAO、BO、POJO
    Java工程为什么要加一个biz层
    Java学习之强引用,弱引用,软引用 与 JVM
    深入Activity,Activity启动模式LaunchMode完全解析
    活体检测
    遥感图像数据集
    NNIE(待尝试)
  • 原文地址:https://www.cnblogs.com/pangguoming/p/10238684.html
Copyright © 2011-2022 走看看