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

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

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

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

Page Visibility API：它让开发人员知道当前选项卡当前是否处于活动状态。当用户切换到另一个选项卡或最小化窗口时，就会触发pagevisibilitychange事件。此 API 将这些属性添加到文档对象。

• document.hidden：页面不在焦点时返回true ，页面处于焦点时返回false 。
• document.visibilityState：它返回文档的当前可见性状态。它将这些状态返回为“隐藏”、 “可见” 、 “卸载” 、 和“预渲染” 。 hidden表示当前标签页不在焦点上， visible表示当前标签页处于焦点状态， unloaded表示当前标签页即将关闭， prerender表示页面已加载但用户尚未查看该页面。它是一个只读属性，您不能修改它。
• document.onvisibilitychange：当visibilitychange事件被触发时的事件监听器。

示例：在此示例中，我们正在创建一个弹出窗口，当用户移动到另一个选项卡或最小化窗口时，它会自动关闭。

HTML

  
    
      .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;
      }
    
  
  
  
    
      Sample popup
      click me
    
  
    
      I am a PopUp
    
    
      let btn = document.querySelector("#btn");
      let pop = document.querySelector(".popup");
  
      btn.addEventListener("click", () => {
        pop.style.display = "flex";
      });
  
      document.addEventListener("visibilitychange", () => {
        pop.style.display = "none";
      });
    
  

输出 ：

onfocus/onblur 方法：这个事件也用于知道元素是否可见。但是这个方法有一个问题，如果你在当前窗口上打开一个小窗口，那么会调用onblur事件，当你关闭那个小窗口时，不会调用onfocus方法并且窗口仍然在模糊状态。

示例：在此示例中，我们显示了一个弹出窗口，当用户关注当前选项卡时会自动消失。

HTML

  
    
      .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;
      }
    
  
  
  
    
      Sample popup
      click me
    
  
    
      I am a PopUp
    
    
      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");
    
  

输出：当用户将焦点转移到另一个窗口，然后又回到原来的窗口时，它会发出警告，说以下消息。

onfocus event called