监听浏览器标签页切换应使用visibilitychange事件，它在页面可见性变化时触发，通过document.visibilityState判断'visible'或'hidden'状态，首次加载不触发，需手动检查初始状态。
HTML 标签页切换本身没有专用“标签页事件”，真正可监听的是页面可见性变化，用 visibilitychange 事件。它不关心你切到哪个标签页，只反馈当前页面是否对用户可见。
怎么监听浏览器标签页切换（visibilitychange）
监听 visibilitychange 是唯一标准、跨浏览器支持的方案，适用于检测用户是否离开或回到当前标签页。
- 必须用
document.addEventListener('visibilitychange', handler)，window.onvisibilitychange兼容性差且无法多绑定 -
document.visibilityState返回字符串：'visible'（至少部分可见）、'hidden'（完全不可见，含最小化、锁屏、切走等）、'prerender'（预渲染中，较少见） - 首次加载页面不会触发该事件，只在可见性实际变化时派发
- 注意：刷新页面、F5、地址栏回车等操作会先触发
hidden再触发visible，不是“切换”而是“重载”
示例：
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
console.log('用户回来了');
// 可恢复定时器、重新拉取未读消息等
} else {
console.log('用户离开了');
// 可暂停动画、暂停视频、减少心跳频率
}
});
为什么不能用 focus/blur 监听标签页切换
focus 和 blur 响应的是窗口焦点，但它们在现代浏览器中已不可靠——尤其在 macOS Safari、Chrome 某些版本下，切标签页可能不触发 blur，或在后台播放音频时误判焦点状态。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
focus事件可能被系统级弹窗、开发者工具面板、甚至某些扩展劫持，导致漏触发 - 它无法区分“切到同源其他标签页”和“切到桌面其他应用”，而
visibilitychange明确反映页面是否处于用户视野中 - 移动端（iOS Safari）中，
focus/blur对标签页切换基本无效，visibilitychange仍稳定工作
popstate 不是标签页切换事件，别混用
popstate 监听的是浏览器历史栈导航（后退/前进按钮、history.back()），和标签页切换无关。常见误解是以为“点回退=切标签页”，其实二者机制完全不同。
- 用户切走再切回，
popstate完全不会触发 - 如果页面没调过
pushState或replaceState，event.state恒为null，不能用来判断是否“刚回来” - 想在切回时恢复路由状态？得结合
visibilitychange+ 主动检查location.pathname，而不是依赖popstate
多标签页间同步状态要用 storage 事件
如果目标是“一个标签页改了主题/登录态，其他同源标签页立刻响应”，那得靠 storage 事件，不是 visibilitychange。
- 触发条件：某标签页执行
localStorage.setItem('key', value) - 效果：同源下**所有其他已打开的标签页**会收到
storage事件，**原标签页自己收不到** - 必须配套初始化逻辑：新标签页打开时需主动读
localStorage.getItem('theme')并应用，否则初始状态为空 - Safari 无痕模式下
localStorage被禁用，storage事件永不触发，需 fallback 到内存缓存或轮询
真正容易被忽略的点：visibilitychange 不代表用户“正在操作”，只代表可见性；而 storage 事件不通知“谁改的”，只通知“改了”。两者都得配合主动状态读取，不能只靠事件推断完整上下文。
