如何使用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事件。

我们可以使用文档的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时，它不会。

更新于：2023年3月10日

2万+ 浏览量

启动您的职业生涯

完成课程获得认证

开始学习
广告