检查窗口或浏览器选项卡是否在 JavaScript 中具有焦点

作者

目录

Check if a Window has Focus using JavaScript

  1. 使用 JavaScript 检查窗口是否具有焦点
  2. 使用 JavaScript 检测浏览器选项卡是否具有焦点

使用 JavaScript 检查窗口是否有焦点

使用该document.hasFocus()方法检查窗口是否具有焦点，例如
if (document.hasFocus()) {}.

该方法返回一个布尔值，指示文档或文档中的任何元素是否具有焦点。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Box content</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
// ✅ Check if window has focus
if (document.hasFocus()) {
  console.log('✅ window has focus');
} else {
  console.log('⛔️ window does NOT have focus');
}

// ---------------------------------------------

// ✅ Check if window has focus EVERY 1.5 seconds
function checkWindowFocused() {
  if (document.hasFocus()) {
    console.log('✅ window has focus');
    document.body.style.backgroundColor = 'lime';

    document.getElementById('box').textContent = 'Window has focus';
  } else {
    console.log('⛔️ window does NOT have focus');
    document.body.style.backgroundColor = 'salmon';

    document.getElementById('box').textContent = 'Window does NOT have focus';
  }
}

setInterval(checkWindowFocused, 1500); // 👉️ check if focused every 1.5 seconds

我们使用
document.hasFocus
方法来检查文档或其中的任何元素是否具有焦点。

该document.hasFocus方法返回一个布尔值：

  • true如果文档有焦点
  • false如果没有

示例中的第二个代码片段使用
setInterval
方法每 1.5 秒检查一次窗口是否有焦点。

我们传递给该setInterval方法的两个参数是：

  1. 每 X 毫秒调用一次的函数。
  2. 函数调用之间的时间（以毫秒为单位）。

如果我在浏览器中打开该示例，我可以看到每次单击文档时，该document.hasFocus方法都会返回false.

检查窗口是否聚焦

检查页面内容是否对用户可见

如果您需要检查页面内容是否对用户可见，例如窗口未最小化并且用户未在同一窗口中打开不同的选项卡，请使用该document.visibilityState属性。
索引.js
function checkDocumentVisible() {
  if (document.visibilityState === 'visible') {
    console.log('✅ page is in the foreground tab of a non-minimized window');

    document.body.style.backgroundColor = 'lime';

    document.getElementById('box').textContent =
      '✅ page is in the foreground tab of a non-minimized window';
  } else {
    console.log(
      '⛔️ document is in background tab or part of a minimized window',
    );

    document.body.style.backgroundColor = 'salmon';

    document.getElementById('box').textContent =
      '⛔️ document is in background tab or part of a minimized window';
  }
}
setInterval(checkDocumentVisible, 1500);

使用上面的代码片段时，
只要页面位于非最小化窗口的前景选项卡中，document.visibilityState
属性就会返回visible

如果页面内容对用户不可见，例如在最小化窗口中，或同一窗口中的非活动选项卡中，则该visibilityState属性返回
hidden。

您还可以添加一个事件侦听器来跟踪可见性的变化。

索引.js
function checkDocumentVisible() {
  if (document.visibilityState === 'visible') {
    console.log('✅ page is in the foreground tab of a non-minimized window');

    document.body.style.backgroundColor = 'lime';

    document.getElementById('box').textContent =
      '✅ page is in the foreground tab of a non-minimized window';
  } else {
    console.log(
      '⛔️ document is in background tab or part of a minimized window',
    );

    document.body.style.backgroundColor = 'salmon';

    document.getElementById('box').textContent =
      '⛔️ document is in background tab or part of a minimized window';
  }
}

// ✅ Add event listener
document.addEventListener('visibilitychange', checkDocumentVisible);

我们使用了
visibilitychange
事件。

当其选项卡的内容变得可见或已隐藏时，将在文档上触发该事件。

如果您最小化窗口或切换到不同的选项卡，您将看到
visibilitychange事件触发。

使用 JavaScript 检测浏览器选项卡是否具有焦点

使用该visibilitychange事件检测浏览器选项卡是否具有焦点，例如document.addEventListener('visibilitychange', checkTabFocused).

当其选项卡的内容变得可见或已隐藏时，将在文档上触发该事件。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Browser tab has focus</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
function checkTabFocused() {
  if (document.visibilityState === 'visible') {
    console.log('✅ browser tab has focus');

    document.body.style.backgroundColor = 'lime';
    document.getElementById('box').textContent = '✅ browser tab has focus';
  } else {
    console.log('⛔️ browser tab does NOT have focus');

    document.body.style.backgroundColor = 'salmon';
    document.getElementById('box').textContent =
      '⛔️ browser tab does NOT have focus';
  }
}

// ✅ Add event listener
document.addEventListener('visibilitychange', checkTabFocused);

我们使用了
visibilitychange
事件。

当其选项卡的内容变得可见或已隐藏时，将在文档上触发该事件。

如果您最小化窗口或切换到不同的选项卡，您将看到
visibilitychange事件触发。

document.visibilityState
属性返回 2 个可能的值：

  • visible– 页面位于非最小化窗口的前景选项卡中。
  • hidden– 页面内容不可见，因为它位于背景选项卡中、最小化窗口的一部分或操作系统的屏幕锁定处于活动状态。

如果我从代码片段加载示例并在浏览器中的选项卡之间切换，我可以看到visibilitychange事件触发。

visibilitychange 事件被触发

如果出现以下情况，该visibilitychange事件也会触发：

  • 浏览器选项卡具有焦点，但浏览器窗口已最小化。
  • 用户的操作系统屏幕锁定被激活。