JavaScript 如何检查浏览器选项卡是否处于活动状态

用户可以在浏览器中打开多个选项卡，并且他们还可以检查特定选项卡是否当前处于活动状态。例如，如果你进行了一个监考测试，你会发现它会在你切换浏览器选项卡时检测到选项卡的变化。

所以，检查浏览器选项卡是否处于活动状态可以有很多应用和用途。本教程将教我们两种方法来检查浏览器选项卡是否活动中。

使用窗口对象的onblur()和onfocus()方法

窗口对象包含了JavaScript中的不同方法。其中之一就是onblur()和onfocus()方法。我们还可以将onblur()和onfocus()方法与HTML元素一起使用。

在这里，我们将使用onblur()和onfocus()方法来检查整个窗口是否发生了选项卡的切换。当用户在浏览器中切换选项卡时，onblur()方法被调用，当用户再次回到当前活动的选项卡时，它调用了onfocus()方法。

此外，我们还可以通过将函数表达式分配给它们来覆盖onblur()和onfocus()方法，使用赋值操作。当用户切换选项卡时，我们可以在函数表达式中实现任何想要的功能。

语法

用户可以按照下面的语法使用onblur()和onfocus()方法来检查浏览器当前选项卡是否活动中。

window.onblur = function () {

   // tab is changed
};
window.onfocus = function () {

   // tab is active
};

在上述语法中，我们通过将函数表达式分配给它们，重写了 onblur() 和 onfocus() 方法。

示例

在下面的示例中，我们创建了 callFunc() ，当用户点击按钮时将调用该函数。此外，我们通过函数表达式重写了 onblur() 和 onfocus() 方法，当用户切换标签并再次返回到相同的标签时，打印不同的消息。

<html>
<body>
   <h3>Using the <i> onblur and onfocus method </i> to detect if tab is active or not in the browser using JavaScript.</h3>
   <div id = "output"> </div><br>
   <button onclick = "callFunc()"> Click to show text </button>
   <script>
      let output = document.getElementById("output");
      function callFunc() {
         output.innerHTML += "You have clicked the button! </br>";
      }

      // The function will invoke when the user changes the tab
      window.onblur = function () {
         output.innerHTML += "browser tab is changed </br>";
      };

      // If users come back to the current tab again, the below function will invoke
      window.onfocus = function () {
         output.innerHTML += "Browser tab is again active! </br>";
      };
   </script>
</body>
</html>

在上面的输出中，用户可以看到当他们更改标签时，会打印出“浏览器标签已更改！”如果再回到当前标签，会打印出“浏览器标签再次激活！”。

使用页面可见性API检查浏览器标签是否活动

在JavaScript中，我们可以使用页面可见性API来检查当前标签是否活动、关闭或最小化。每当用户更改标签、最小化或重新打开时，文档中的visibilitychange事件会被触发。

我们可以使用document的addEventListner()方法。我们可以将“visibilitychange”事件作为第一个参数传递，并将回调函数作为第二个参数，以在用户更改标签时执行一些活动。

语法

用户可以按照下面的语法使用页面可见性API来检测浏览器标签的可见状态。

document.addEventListener("visibilitychange", () => {
   if (document.hidden) {

      // tab is changed
   } else {

      // tab is active
   }
});

在上述语法中，我们将visibilitychange事件监听器添加到网页中。

参数

visibilitychange - 当用户更改或最小化标签时触发的事件。
document.hidden - 它是一个包含布尔值的文档属性，表示当前标签是否处于活动状态。

示例

在下面的示例中，我们使用上述语法中解释的页面可见性API来检查标签是否处于活动或关闭状态。用户可以切换标签并返回到标签后可以观察输出结果。

<html>
<body>
   <h3>Using the <i> onblur and onfocus method </i> to detect if tab is active or not in the browser using JavaScript.</h3>
   <div id = "output"> Tab is active currently! <br /> </div>
   <script>
      let output = document.getElementById("output");

      // add event listeners on the document for the visibilityChange event
      document.addEventListener("visibilitychange", () => {

         // use the document's hidden property to check if the current tab is active!
         if (document.hidden) {
            output.innerHTML += "browser tab is changed </br>";
         } else {
            output.innerHTML += "Browser tab is again active! </br>";
         }
      });
   </script>
</body>
</html>

在本教程中，用户学会了检测浏览器中的活动选项卡。YouTube也使用相同的方法来检查您当前是否在选项卡中观看视频。如果您将浏览器打开一段时间，您的计算机会自动进入睡眠模式，但是当您在观看YouTube时，它不会。