如何利用前端代码判断浏览器是否处于活动窗口？

判断页面活动状态

如何利用前端代码判断浏览器是否处于系统当前活动窗口呢？遗憾的是，直接判定此状态的方法目前尚不存在。

但我们可以通过以下折衷方案间接判断页面当前状态：

• visibilitychange 事件：监听页面可见性状态的变化。当页面被最小化、切换到其他选项卡或窗口时，将触发此事件。
• focus 事件：特定元素或页面失去/获得焦点时触发此事件。我们可以监听某个特定的页面元素（如按钮或输入框）的 focus 事件。

通过整合以上两种方法，我们可以大致判断页面是否处于活动状态：

window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 页面未激活
  } else {
    // 页面处于激活状态，继续监听元素焦点
  }
});

// 监听特定元素的焦点变化
document.getElementById('my-element').addEventListener('focus', () => {
  // 页面处于激活状态
});

需要注意的是，此方法并不能保证 100% 准确，因为有可能会出现某些情况：

• 用户将页面最小化，但元素仍保持焦点。
• 用户切换到其他选项卡，但页面仍然可见（例如，在某些浏览器中，最小化时视频仍在播放）。

因此，此方法只能提供大致判断，并在大多数情况下是有效的。