HTML5 Notification实现浏览器通知

最后更新时间：2022年03月03日

<html>
    <head>
        <title>地址栏闪烁</title>
        <script type="text/javascript">
            var isShine = true;
            //Chrome/FireFox
            window.onfocus = function() {
                isShine = false;
            };
            window.onblur = function() {
                isShine = true;
            };
 
            //IE
            document.onfocusin = function() {
                isShine = false;
            };
            document.onfocusout = function() {
                isShine = true;
            };
 
            debugger;
            //保存原始title，便于还原
            var defaultTitle = document.title
            setInterval(function() {
                var title = document.title;
                //判断是否获取焦点
                if (isShine == true) {
                    //如果没有获取焦点就判断名称是否包含未读消息
                    if (/未读消息/.test(title) == false) {
                            //如果包含就显示为空
                        document.title = '【未读消息】';    
                    } else {
                            //否则显示未读消息，间隔0.5秒实现闪烁
                        document.title = '【　　　　　】';
                    }
                } else {
                        //如果获取到焦点就不闪烁，使用元素标题
                    document.title = defaultTitle;
                }
            }, 500);
 
        </script>
    </head>
    <body>
        测试浏览器标题栏闪烁
    </body>
</html>