如何使用Javascript检测用户是否处于其他已打开的浏览器标签页而非本站

核心实现依赖 #

浏览器原生提供的Page Visibility API是实现该需求的标准方案，不需要引入任何第三方依赖，所有现代浏览器都已原生支持。

核心属性与事件 #

你可以直接调用document对象下的相关属性和事件完成检测：

• document.hidden：只读布尔值，当用户切到其他标签页、最小化浏览器导致当前页面不可见时，返回true；页面处于可见状态时返回false
• document.visibilityState：返回当前页面的可见状态，共三种取值：
  • visible：当前标签页为浏览器活跃标签且处于可见状态
  • hidden：当前标签页不可见
  • prerender：页面处于预渲染阶段，用户尚未访问该页面
• visibilitychange事件：当页面的可见状态发生变化时触发，直接监听该事件即可实时获取用户的活跃状态

代码示例 #

以下示例实现了状态检测并向DOM写入对应内容的逻辑：

// 提前创建用于展示状态的DOM节点，或者直接插入到你需要的位置
const notifyContainer = document.createElement('div');
document.body.appendChild(notifyContainer);

// 监听可见性变化事件
document.addEventListener('visibilitychange', function() {
  if (document.hidden) {
    // 用户离开当前页面，写入自定义HTML内容
    notifyContainer.innerHTML = `<div class="notify">你已离开当前页面，新消息将在返回后提示</div>`;
    // 可在此处添加其他逻辑：暂停视频播放、停止接口轮询等
  } else {
    // 用户返回当前页面，可按需重置内容
    notifyContainer.innerHTML = '';
  }
});

补充说明 #

• 该API仅能检测当前页面是否可见，无法获取用户浏览的其他网站内容，完全符合浏览器安全规范
• 若浏览器窗口被其他桌面应用遮挡，但当前标签仍是浏览器的活跃标签，document.hidden会返回false，目前没有原生API可以检测浏览器被其他应用遮挡的场景
• 兼容性覆盖Chrome 33+、Firefox 18+、Safari 7+、Edge 12+，无需额外做兼容处理

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