如果浏览器标签页以 JavaScript 为焦点，如何返回 true？

在某些情况下，我们可能需要检查浏览器选项卡是否获得焦点。原因包括：

• 如果用户未使用该页面，则阻止发送网络请求，因为这会减少服务器上的负载量。此外，如果我们使用付费的第三方 API，这将节省成本。
• 当标签未聚焦时，停止播放媒体。
• 当用户切换到另一个窗口或选项卡时自动暂停浏览器内游戏。
• 许多站点使用此功能跟踪用户实际与网站交互的时间段。

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

使用页面可见性 API： HTML5 提供了页面可见性 API，让开发人员知道选项卡当前是否可见。当用户最小化窗口或切换到另一个选项卡时，API 会发送一个可见性更改事件。此 API 将以下两个属性添加到文档对象，并且这两个属性都是只读的。

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

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

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

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

HTML

  
    
      * {
        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;
      }
    
  
  
    Switch tab to change the background color.
    
      Original Color
    
  
  
    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;
    });
  

输出：

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

• window.onfocus: This event gets fired when the tab has received focus.
• window.onblur：当用户最小化窗口、切换到另一个选项卡或使用另一个窗口时会触发模糊事件。即使我们使用另一个小窗口并且选项卡仍然部分可见，或者即使我们单击浏览器的位置栏，也会触发模糊事件。

示例：我们将创建一个网页，当标签丢失焦点时，会更改颜色。这里我们将尝试切换到另一个窗口，了解document.hidden和window.onblur的区别。

HTML

  
    
      * {
        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;
      }
    
  
  
    Do not loose focus!
    
      Original Color
    
  
  
    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;
    });
  

输出：