如何检测浏览器标签/窗口聚焦状态？解决Page Visibility API局限

针对你遇到的Page Visibility API无法检测「标签活跃但被其他程序覆盖/焦点转移到其他窗口」的问题，可以通过以下两种方式补充实现：

1. 监听window.blur与window.focus事件 #

这两个事件能直接捕捉窗口焦点的变化，不管是切换标签、最小化窗口，还是被其他应用程序覆盖、用户点击其他窗口的场景，都会触发对应事件。

示例代码：

// 标记当前窗口是否处于焦点状态
let isFocused = true;

// 窗口失去焦点时触发
window.addEventListener('blur', () => {
  if (isFocused) {
    isFocused = false;
    // 执行你的分数处罚逻辑，比如记录离开时间点
    console.log('窗口已失去焦点，可能存在作弊行为');
  }
});

// 窗口重新获得焦点时触发
window.addEventListener('focus', () => {
  if (!isFocused) {
    isFocused = true;
    // 可在这里计算离开时长，根据时长执行不同处罚
    console.log('窗口重新获得焦点');
  }
});

2. 定时检查document.hasFocus()状态 #

作为blur/focus事件的补充，定时调用document.hasFocus()可以主动检测窗口是否处于焦点状态，避免某些特殊场景下事件未触发的情况。

示例代码：

let isFocused = true;

setInterval(() => {
  const currentFocusState = document.hasFocus();
  if (currentFocusState !== isFocused) {
    isFocused = currentFocusState;
    if (!isFocused) {
      console.log('检测到窗口失去焦点');
      // 执行处罚逻辑
    } else {
      console.log('检测到窗口重新获得焦点');
    }
  }
}, 1000); // 每秒检查一次，可根据需求调整间隔

注意事项 #

• 可以结合Page Visibility API和上述方法，区分「标签切换」和「窗口被覆盖/焦点转移」的场景，更精准地判断作弊行为；
• 建议设置时间阈值，比如窗口失去焦点超过2秒才执行处罚，避免用户误触其他窗口导致的误判；
• 部分浏览器可能在隐私模式或特定安全策略下限制这些事件的触发，需要做兼容测试。

内容的提问来源于stack exchange，提问作者drdo