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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券