https://blog.csdn.net/qq_39077394/article/details/118998231

在网页开发过程中，有时需要实现聊天功能，或者在一些网站跟在线客服咨询的时候，会看到一些消息通知的提示，常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。这里总结一下自己的实现方法

实现的效果：
当前窗体失焦的时候，标题开始闪动，当前窗体获取焦点的时候，则停止闪动。
并且在收到消息的同时右侧弹出消息通知。

实现标题闪烁需要用到窗口的获取焦点和失去焦点的方法，由于IE和其他Chrome及FireFox的区别，这里需要用到的方法就不一样，具体是：
Chrome和FireFox浏览器是window的onfocus, onblur方法；
而IE浏览器则是document的onfocusin, onfocusout方法；

实现通知提醒则需要用到Notification.requestPermission方法
Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示

点击了允许后，则当前域名的网站就被允许在该电脑上出现通知弹框，以谷歌浏览器为例，这时依次点击：设置——高级——网站设置——近期活动，就可以在允许下面看到刚才点击了允许通知的站点的地址，如图：

下面是代码展示：


<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我的网页</title>
    </head>
    <body>
        <h2>浏览器窗体获得焦点则停止标题闪烁通知+失去焦点则开启标题闪烁通知</h2>
        <script>
            //窗体失焦的时候，标题就会闪。
            //这里有一个小的知识点，就是浏览器窗体获得焦点和失去焦点，Chrome和FireFox浏览器是window的onfocus, onblur方法；而IE浏览器则是document的onfocusin, onfocusout方法，因此有：
            var titleInit = document.title,
                isShine = true;
            setInterval(function() {
                var title = document.title;
                if (isShine == true) {
                    if (/新/.test(title) == false) {
                        document.title = '【你有新消息】';
                    } else {
                        document.title = '【　　　　　】';
                    }
                } else {
                    document.title = titleInit;
                }
            }, 500);

            // for Chrome and FireFox
            window.onfocus = function() {
                isShine = false;
            };
            window.onblur = function() {
                isShine = true;
            };

            // for IE
            document.onfocusin = function() {
                isShine = false;
            };
            document.onfocusout = function() {
                isShine = true;
            };
        </script>


        <script>
            //实现右侧弹出消息通知
            window.onload = function() {
                suportNotify()
            }

            //判断浏览器是否支持Web Notifications API
            function suportNotify() {
                if (window.Notification) {
                    // 支持
                    console.log("支持" + "Web Notifications API");
                    //如果支持Web Notifications API，再判断浏览器是否支持弹出实例
                    showMess()
                } else {
                    // 不支持
                    alert("不支持 Web Notifications API");
                }
            }

            //判断浏览器是否支持弹出实例
            function showMess() {
                setTimeout(function() {
                    console.log('1：' + Notification.permission);
                    //如果支持window.Notification 并且 许可不是拒绝状态
                    if (window.Notification && Notification.permission !== "denied") {
                        //Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示
                        Notification.requestPermission(function(status) {
                            console.log('2: ' + status);
                            //如果状态是同意
                            if (status === "granted") {
                                var m = new Notification('收到信息', {
                                    body: '这里是通知内容！你想看什么客官？', //消息体内容
                                    icon: "https://img1.baidu.com/it/u=3041604093,3909442121&fm=26&fmt=auto&gp=0.jpg" //消息图片
                                });
                                m.onclick = function() { //点击当前消息提示框后，跳转到当前页面
                                    window.focus();
                                }
                            } else {
                                alert('当前浏览器不支持弹出消息')
                            }
                        });
                    }
                }, 1000)
            }
        </script>
    </body>
</html>
文档更新时间: 2023-11-16 06:24   作者：admin