html5的消息通知

最新推荐文章于 2024-04-03 01:04:29 发布

weixin_30270561

最新推荐文章于 2024-04-03 01:04:29 发布

阅读量712

点赞数

文章标签：运维 javascript ViewUI

原文链接：http://www.cnblogs.com/liyan22/p/6683137.html

版权

这里介绍一个HTML5的notification demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>notification</title>
    </head>
    <body>
        <button id="button">消息通知</button>
        <script>
            // var button = document.getElementById('#button');
            var button = document.querySelector('#button'); //上面那样写不可以
            button.addEventListener('click', function() {
                if (!("Notification" in window)) {
                    alert("不支持notification");
                } else if (Notification.permission === "granted") { // 允许通知
                    notice();
                } else if (Notification.permission !== "denied") {
                    // 用户没有选择是否显示通知，向用户请求许可
                    Notification.requestPermission(function(permission) {
                        if(permission === "granted") {
                            notice();
                        }
                    });
                }
            }, false)

            function notice() {
                var notification = new Notification("你好，JavaScript", {
                    body: '微信订阅号'
                });
                notification.onclick = function() {
                    notification.close();
                }
            }
        </script>
    </body>
</html>

将该demo部属在nginx上（详见上一篇随笔），在谷歌浏览器（支持HTML5 notification的浏览器就可以）中打开页面，会看到pc端右下角弹出消息通知。

转载于:https://www.cnblogs.com/liyan22/p/6683137.html

weixin_30270561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5的消息通知

这里介绍一个HTML5的notification demo：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>notification</title> </head> &...
复制链接

扫一扫