最可靠的方式是使用 page visibility api，通过 visibilitychange 事件结合 document.hidden 或 document.visibilitystate 判断页面可见性；关闭/刷新用 beforeunload；spa 路由跳转需配合框架路由守卫。

最可靠的方式是使用 Page Visibility API，它专为识别页面是否对用户可见而设计，能准确捕获切换标签页、最小化窗口、锁屏等行为。

用 visibilitychange 事件监听页面可见性

这是目前推荐的主流方案，触发精准、兼容性好（IE10+、所有现代浏览器），且性能开销低。

• 监听 visibilitychange 事件，通过 document.hidden 或 document.visibilityState 判断状态
• document.hidden === true 表示页面不可见（切换标签、最小化、锁屏、休眠）
• document.visibilityState === 'hidden' 含义相同；'visible' 表示回到前台
• 注意：关闭或刷新页面时，部分浏览器可能触发 hidden，但无法与普通切换区分，不建议依赖它判断“关闭”

区分关闭/刷新页面：用 beforeunload 事件

当用户点击关闭、刷新、跳转站外链接或提交表单时，beforeunload 会在页面卸载前触发，适合做防丢失提醒或轻量清理。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 可设置 e.returnValue 显示原生确认弹窗（内容在 Chrome/Firefox 中受限，仅作提示）
• 不能执行异步操作（如 fetch），浏览器不会等待其完成
• 不适用于 SPA 内部路由跳转（如 Vue Router 的页面切换），需配合路由守卫

补充辅助判断：focus / blur 事件

window.focus 和 window.blur 可感知窗口级焦点变化，但容易误触——比如点击地址栏、开发者工具、弹窗或系统通知都会触发 blur。

• 适合简单场景（如暂停音频），但不如 visibilitychange 稳定
• 若必须用，建议和 visibilitychange 结合：只在 visibilityState === 'hidden' 且 blur 触发时才执行关键逻辑
• 避免单独依赖 blur 做数据保存或状态上报

SPA 路由跳转场景：用路由守卫

在 Vue、React Router 等框架中，页面未刷新但 URL 改变，此时 visibilitychange 和 beforeunload 都不触发。

• Vue 3（vue-router@4）：使用 onBeforeRouteLeave 在组件内监听离开当前路由
• React Router v6：用 useBlocker 或 useNavigate 的 block 选项拦截导航
• 这类监听只管应用内跳转，和浏览器级离开行为互为补充

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南