怎么在HTML5中实现Web Notification桌面右下角通知功能

发布时间:2021-05-22 16:17:26 作者:Leah
来源:亿速云 阅读:224

这篇文章将为大家详细讲解有关怎么在HTML5中实现Web Notification桌面右下角通知功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性。通过Web Notifications(桌面通知系统),网站可以在用户桌面弹出一条通知,无论用户是否浏览当前网页,甚至最小化了浏览器,通知均可到达用户桌面。

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <a onclick="showNotification();">点我看右下角信息</a>

        <script>
            function showNotification() {
                window.Notification.permission = "granted";
                alert(window.Notification.permission);
                if(window.Notification) {
                    if(window.Notification.permission == "granted") {
                        var notification = new Notification('你有一条新信息', {
                            body: "你好我是王小婷",

                            icon: "img/1.jpg"
                        });
                        setTimeout(function() { notification.close(); }, 5000);
                    } else {
                        window.Notification.requestPermission();
                    }
                } else alert('你的浏览器不支持此消息提示功能,请使用chrome内核的浏览器!');
            };
        </script>
    </body>
</html>

关于怎么在HTML5中实现Web Notification桌面右下角通知功能就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. HTML5桌面通知提示功能怎么弄
  2. HTML5中如何实现Web Notification桌面通知功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5 web notification

上一篇:如何使用laravel-admin删除图片

下一篇:怎么在HTML5中实现移动端复制功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》