H5桌面消息通知Notification

最新推荐文章于 2024-03-14 11:41:24 发布

不敲代码的攻城狮

最新推荐文章于 2024-03-14 11:41:24 发布

阅读量3.3k

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_34845394/article/details/85130366

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

H5桌面消息通知Notification

代码很简单,直接复制即可看到效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5桌面通知</title>
    </head>
    <body>
        <input type="button" value="开启桌面通知" onclick="showDeskTopNotice('通知','HTML5桌面消息');">
        <script>
            function showDeskTopNotice(title,msg){
                var Notification = window.Notification || window.mozNotification || window.webkitNotification;
                if(Notification){
                    Notification.requestPermission(function(status){
                        //status默认值'default'等同于拒绝 'denied' 意味着用户不想要通知 'granted' 意味着用户同意启用通知
                        if("granted" != status){
                            return;
                        }else{
                            var tag = "sds"+Math.random();
                            var notify = new Notification(
                                title,
                                {
                                    dir:'auto',
                                    lang:'zh-CN',
                                    tag:tag,//实例化的notification的id
                                    icon:'https://admin.hms.xin/group1/M00/00/01/rB_YCFsY0OeAX6Q8AAAQvnJ6aNc109.ico',//通知的缩略图,//icon 支持ico、png、jpg、jpeg格式
                                    body:msg //通知的具体内容
                                }
                            );
                            notify.onclick=function(){
                                //如果通知消息被点击,通知窗口将被激活
                                window.focus();
                            },
                            notify.onerror = function () {
                                console.log("HTML5桌面消息出错！！！");
                            };
                            notify.onshow = function () {
                                /*setTimeout(function(){
                                    notify.close();
                                },2000)*/
                            };
                            notify.onclose = function () {
                                console.log("HTML5桌面消息关闭！！！");
                            };
                        }
                    });
                }else{
                    console.log("您的浏览器不支持桌面消息");
                }
            };
        </script>
    </body>
</html>

不敲代码的攻城狮

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
H5桌面消息通知Notification

H5桌面消息通知Notification代码很简单,直接复制即可看到效果&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;html5桌面通知&lt;/title&gt; &lt;/head&gt;
复制链接

扫一扫