使用JavaScript检查浏览器当前选项卡是否被切换

2025-01-15 阅读 437 评论 5 点赞 343

摘要：在javascript中，我写了一个示例代码，用于判断当前选项卡是否已经切换。用“visibilitychange”获取页面显示状态的事件，用“visibilityState”获取当前状态来判断。确定选项卡是否已切换判断tab是否切换1. visibilitychange获取页面显示状态的事件2. visibilityState获取页

在javascript中，我写了一个示例代码，用于判断当前选项卡是否已经切换。

用“visibilitychange”获取页面显示状态的事件，用“visibilityState”获取当前状态来判断。

确定选项卡是否已切换

判断tab是否切换

1. visibilitychange获取页面显示状态的事件

2. visibilityState获取页面显示状态的事件（以下两个返回值）

visible：选项卡聚焦或未最小化

hidden：选项卡未打开或最小化中所述修改相应参数的值。

※即使锁上window也会变成“hidden”。

document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'visible') {
    console.log('选项卡已聚焦');
  } else {
    console.log('标签已切换');
  }
});

执行结果

使用JavaScript检查浏览器当前选项卡是否被切换