如何检查浏览器标签当前是否活动

有时我们需要检查当前浏览器标签是否活动。当您在浏览器中打开YouTube并观看长时间的影片时，自动屏幕超时不起作用，但是当您打开Facebook后，屏幕在一段时间后由于设备的屏幕超时而关闭。那么YouTube是如何知道标签是否活动的呢？

在本文中，我们将讨论此问题。为了实现此功能，我们有以下方法。

页面可见性API
Window.onfocus和Window.onblur

页面可见性API： 它可以让开发人员知道当前标签是否活动。当用户切换到另一个标签页或最小化窗口时，将触发 pagevisibilitychange 事件。该API为document对象添加了以下属性。

document.hidden ：当页面没有焦点时，返回 true ，当页面有焦点时返回 false 。
document.visibilityState ：返回文档的当前可见性状态。它返回以下状态： “ hidden “， “visible” ， “unloaded” ，和 “prerender” 。 hidden 表示当前标签没有焦点， visible 表示当前标签有焦点， unloaded 表示当前标签即将关闭， prerender 表示页面已加载但用户尚未查看页面。它是一个只读属性，无法修改。
document.onvisibilitychange: 当 visibilitychange 事件被触发时的事件监听器。

示例： 在这个示例中，我们创建了一个弹出窗口，当用户切换到另一个标签页或最小化窗口时，它会自动关闭。

<!DOCTYPE html> 
<html> 
  <head> 
    <style type="text/css" media="screen"> 
      .popup { 
        height: 300px; 
        width: 300px; 
        margin: 0 auto; 
        border: 1px solid; 
        box-shadow: 7px 7px 167px 1px #585858; 
        display: none; 
        justify-content: center; 
        align-items: center; 
        margin-top: 100px; 
        background: #f1f1f1; 
        font-family: cursive; 
      } 
    </style> 
  </head> 
  
  <body> 
    <center> 
      <h1>Sample popup</h1> 
      <button id="btn">click me</button> 
    </center> 
  
    <div class="popup"> 
      <p>I am a PopUp</p> 
    </div> 
    <script> 
      let btn = document.querySelector("#btn"); 
      let pop = document.querySelector(".popup"); 
  
      btn.addEventListener("click", () => { 
        pop.style.display = "flex"; 
      }); 
  
      document.addEventListener("visibilitychange", () => { 
        pop.style.display = "none"; 
      }); 
    </script> 
  </body> 
</html>

输出：

如何检查浏览器标签当前是否活动

onfocus / onblur 方法: 这些事件也用于判断元素是否可见。但是这种方法存在一个问题，如果你在当前窗口上面打开了一个小窗口，那么会调用 onblur 事件，而当你关闭小窗口时， onfocus 方法不会被调用，窗口仍然保持模糊状态。

示例: 在这个示例中，我们展示了一个当用户离开当前标签页时自动隐藏的弹出框。

<!DOCTYPE html> 
<html> 
  <head> 
    <style type="text/css" media="screen"> 
      .popup { 
        height: 300px; 
        width: 300px; 
        margin: 0 auto; 
        border: 1px solid; 
        box-shadow: 7px 7px 167px 1px #585858; 
        display: none; 
        justify-content: center; 
        align-items: center; 
        margin-top: 100px; 
        background: #f1f1f1; 
        font-family: cursive; 
      } 
    </style> 
  </head> 
  
  <body> 
    <center> 
      <h1>Sample popup</h1> 
      <button id="btn">click me</button> 
    </center> 
  
    <div class="popup"> 
      <p>I am a PopUp</p> 
    </div> 
    <script> 
      let btn = document.querySelector("#btn"); 
      let pop = document.querySelector(".popup"); 
  
      btn.addEventListener("click", () => { 
        pop.style.display = "flex"; 
      }); 
  
      window.onblur = () => (pop.style.display = "none"); 
      window.onfocus = () => alert("onfocus event called"); 
    </script> 
  </body> 
</html>

输出: 当用户将焦点切换到另一个窗口，然后再次回到原始窗口时，它会弹出以下消息。

如何检查浏览器标签当前是否活动