刚好做过类似的需求，给你一套完整的解决方案，能精准检测浏览器标签的Visibility State（可见性状态），不管是同一浏览器内的标签切换，还是从浏览器切换到其他应用的场景都能覆盖到~

我们需要监测两种核心场景下的标签可见性变化：

• 同一浏览器内的标签页之间切换
• 浏览器窗口被切换到后台（比如打开其他应用程序）

这段代码做了全浏览器兼容性适配，自动识别不同厂商的Visibility API实现：

var visibilityState, activeTab = (function(){ 
    var stateKey, eventKey, keys = { 
        hidden: "visibilitychange", 
        webkitHidden: "webkitvisibilitychange", 
        mozHidden: "mozvisibilitychange", 
        msHidden: "msvisibilitychange" 
    }; 
    for (stateKey in keys) { 
        if (stateKey in document) { 
            eventKey = keys[stateKey]; 
            break; 
        } 
    } 
    return function(c) { 
        if (c) document.addEventListener(eventKey, c); 
        return !document[stateKey]; 
    } 
})(); 

activeTab(function() { 
    visibilityState = activeTab(); 
}); 

代码逻辑拆解 #

• 首先遍历不同浏览器的API前缀（webkit/moz/ms），自动匹配对应的hidden属性和visibilitychange事件，完美解决跨浏览器兼容性问题
• activeTab是一个复用函数：传入回调函数时会注册可见性变化监听；直接调用时会返回当前标签是否处于可见激活状态（true表示可见，false表示隐藏）
• 通过监听可见性变化事件，实时更新全局变量visibilityState，让我们随时能获取当前的标签可见状态

下面是一个实用的场景示例：当窗口失焦时，判断是否是因为标签被隐藏导致的切换行为：

$(window).blur(function(){ 
    if(!visibilityState){ 
        console.log("Tab Switch happened ..."); 
    } 
}); 

示例说明 #

• 当用户切换到其他标签页，或者把浏览器切到后台时，visibilityState会自动变为false
• 结合window.blur事件，我们可以区分「单纯的窗口失焦（比如点击浏览器地址栏）」和「标签/浏览器被隐藏」这两种情况，从而精准捕获标签切换的行为

内容的提问来源于stack exchange，提问作者Bikram