JavaScript 如何检查浏览器选项卡页是否处于焦点状态

可能有一些情况需要检查浏览器选项卡是否处于焦点状态。原因包括：

如果用户未使用页面，则防止发送网络请求，以减少服务器的负载。此外，如果我们使用付费的第三方API，还可以节省费用。
当选项卡未处于焦点状态时停止媒体播放。
当用户切换到其他窗口或选项卡时，自动暂停在浏览器中的游戏。
许多网站使用此功能跟踪用户实际与网站互动的时间段。

在本文中，我们将学习如何实现此功能。我们有以下两种方法：

使用页面可见性 API： HTML5提供了页面可见性API，让开发人员知道当前选项卡是否可见。当用户最小化窗口或切换到其他选项卡时，API会发送visibilitychange事件。此API向document对象添加以下两个只读属性。

document.hidden属性： 当当前选项卡处于“可见”状态时返回false，否则返回true。这里的“可见”关键字具有特殊意义。假设在当前选项卡上方打开另一个小窗口，即使选项卡不在焦点状态，document.hidden也会返回false，因为选项卡的其余部分仍然可见，该部分没有被小窗口覆盖。

document.visibilityState属性： 此属性返回一个表示文档当前可见性状态的字符串。可能的值有：

visible： 页面内容可见或至少部分可见，如上所述。
hidden： 页面内容对用户不可见，可能是因为文档所在的选项卡在后台或部分窗口被最小化，或者因为设备的屏幕关闭。
prerender： 页面已加载，但用户尚未查看页面。
unloaded： 页面正在从内存中卸载中，即将关闭。

示例： 我们将创建一个网页，当用户切换选项卡或最小化窗口时，网页的颜色会改变。

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            box-sizing: border-box;
            font-family: "Roboto", sans-serif;
        }
 
        html,
        body {
            height: 100%;
        }
 
        body {
            background-color: #f1f5f8;
        }
 
        #txt {
            text-align: center;
        }
 
        .btn_container {
            padding: 10px;
            text-align: center;
        }
 
        #btn {
            border-radius: 4px;
            cursor: pointer;
            padding: 4px 8px;
            background-color: white;
            font-size: 1.2em;
            letter-spacing: 1px;
        }
    </style>
</head>
 
<body>
    <h2 id="txt">Switch tab to change the background color.</h2>
    <div class="btn_container">
        <button id="btn">Original Color</button>
    </div>
</body>
<script>
    const ogcolor = "#f1f5f8";
    const newcolor = "#39a9cb";
    const txt = document.getElementById("txt");
    const btn = document.getElementById("btn");
 
    document.addEventListener("visibilitychange", function (event) {
        if (document.hidden) {
            document.body.style.backgroundColor = newcolor;
            txt.innerText = "Background color has changed !";
        }
    });
 
    btn.addEventListener("click", function () {
        txt.innerText = "Switch tab to change the background color.";
        document.body.style.backgroundColor = ogcolor;
    });
</script>
</html>

输出：

JavaScript 如何检查浏览器选项卡页是否处于焦点状态

使用window.onfocus和window.onblur事件：

window.onfocus： 当标签获得焦点时触发此事件。
window.onblur： 当用户最小化窗口、切换到另一个标签或使用其他窗口时，会触发模糊事件。即使我们使用另一个小窗口，标签仍然部分可见，或者我们点击浏览器的地址栏，模糊事件也会触发。

示例： 我们将创建一个网页，当标签失去焦点时改变颜色。在这里，我们将尝试切换到另一个窗口，以及理解document.hidden和window.onblur之间的区别。

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            box-sizing: border-box;
            font-family: "Roboto", sans-serif;
        }
 
        html,
        body {
            height: 100%;
        }
 
        body {
            background-color: #f1f5f8;
        }
 
        #txt {
            text-align: center;
        }
 
        .btn_container {
            padding: 10px;
            text-align: center;
        }
 
        #btn {
            border-radius: 4px;
            cursor: pointer;
            padding: 4px 8px;
            background-color: white;
            font-size: 1.2em;
            letter-spacing: 1px;
        }
    </style>
</head>
 
<body>
    <h2 id="txt">Do not loose focus!</h2>
    <div class="btn_container">
        <button id="btn">Original Color</button>
    </div>
</body>
<script>
    const ogcolor = "#f1f5f8";
    const newcolor = "#39a9cb";
    const txt = document.getElementById("txt");
    const btn = document.getElementById("btn");
 
    window.onfocus = function () {
        txt.innerText = "This tab is in focus!";
        document.body.style.backgroundColor = ogcolor;
    };
    window.onblur = function () {
        document.body.style.backgroundColor = newcolor;
        txt.innerText = "Lost focus, background color has changed !";
    };
    btn.addEventListener("click", function () {
        txt.innerText = "Switch tab to change the background color.";
        document.body.style.backgroundColor = ogcolor;
    });
</script>
</html>

输出结果：

JavaScript 如何检查浏览器选项卡页是否处于焦点状态