浏览器的visibilitychange 事件ie10以下不兼容

最新推荐文章于 2023-05-25 11:33:04 发布

转载最新推荐文章于 2023-05-25 11:33:04 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cssfirefly/p/3982100.html

文章标签：

#javascript #ViewUI

本文介绍两种使用JavaScript检测浏览器标签页活动状态的方法：一种利用jQuery库实现，另一种直接使用原生JavaScript实现。这两种方法均可帮助开发者了解用户是否正在查看当前标签页，并据此执行一些特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://mat1.gtimg.com/www/js/jquery/jquery-1.11.1.min.js"></script>
    <script>
/***
   切换浏览器tab，判断当前tab是否活跃
***/
    (function(g, h, $, b) {
        var e, i, f = 'onfocusin' in h && 'hasFocus' in h ? 'focusin focusout' : 'focus blur',
            d = ['', 'moz', 'ms', 'o', 'webkit'],
            c = $.support,
            a = $.event;
        while ((i = e = d.pop()) != b) {
            i = (e ? e + 'H' : 'h') + 'idden';
            if (c.pageVisibility = typeof h[i] == 'boolean') {
                f = e + 'visibilitychange';
                break
            }
        }
        $(/blur$/.test(f) ? g : h).bind(f,
            function(m) {
                var l = m.type,
                    j = m.originalEvent,
                    k = j.toElement;
                if (!/^focus./.test(l) || (k == b && j.fromElement == b && j.relatedTarget == b)) {
                    a.trigger((i && h[i] || /^(?:blur|focusout)$/.test(l) ? 'hide' : 'show') + '.visibility')
                }
            })
    }(this, document, jQuery));

    var o={}
    o.$tabFlag = true;
     /**  切换页卡 **/  
    var changeTab=function() {
        console.log(333)
        $(document).bind({
            'show.visibility': function() { // 当前活跃
                o.$tabFlag = true;
                console.log(222)
            },
            'hide.visibility': function() { // 失去当前状态
                o.$tabFlag = false;
                console.log(11111)
            }
        });
    }
    
    changeTab();
    </script>
</head>
<body>    
</body>
</html>

方法2

                var o={};
                // 找到当前浏览器支持的hidden属性名和visibilitychange事件名
                var hidden, visibilityChange;
                if (typeof document.hidden !== "undefined") {
                    hidden = "hidden";
                    visibilityChange = "visibilitychange";
                } else if (typeof document.mozHidden !== "undefined") {
                    hidden = "mozHidden";
                    visibilityChange = "mozvisibilitychange";
                } else if (typeof document.msHidden !== "undefined") {
                    hidden = "msHidden";
                    visibilityChange = "msvisibilitychange";
                } else if (typeof document.webkitHidden !== "undefined") {
                    hidden = "webkitHidden";
                    visibilityChange = "webkitvisibilitychange";
                }
                $(document).bind(visibilityChange,function(){
                    if (document[hidden]) {
                        console.log(1111)
                        o.$tabFlag = false;
                        // videoElement.pause();
                    } else {
                        console.log(222)
                        o.$tabFlag = true;
                        // videoElement.play();
                    }
                })