🚀 页面离场侦查术：如何精准判断用户离开你的网页？
你以为用户还在认真浏览？其实TA可能早已切屏摸鱼！掌握这几种前端侦测技巧，让页面不再“盲眼工作”。
前言：为什么需要知道用户离开了？
在单页应用（SPA）盛行的今天，了解用户是否离开当前页面变得尤为重要。比如：
- 视频网站需要知道用户切屏时暂停播放
- 在线文档编辑器需要实时保存用户内容
- 聊天应用需要显示用户的在线状态
- 广告曝光统计需要准确计算有效展示时间
- 保存未提交的表单数据
- 记录用户停留时长
- 触发退出意图调查问卷
🔍 核心方法一：Page Visibility API（推荐）
原理揭秘
通过监听document.visibilityState变化，我们可以感知当前标签页的可见状态：
visible：页面内容至少部分可见hidden：页面处于后台或最小化状态prerender：预渲染状态（较少使用）
Page Visibility API 提供了一种标准化的方式来检测页面是否对用户可见。这是目前最优雅、最推荐的解决方案。
// 基础用法document.addEventListener('visibilitychange',function(){if(document.hidden){console.log('页面被隐藏（用户切屏或最小化窗口）');// 执行相关操作：暂停视频、停止动画等}else{console.log('页面重新获得焦点');// 恢复相关操作}});// 更完整的实现classPageVisibilityMonitor{constructor(){this.handleVisibilityChange=this.handleVisibilityChange.bind(this);this.init();}init(){// 添加事件监听document.addEventListener('visibilitychange',this.handleVisibilityChange);// 兼容不同浏览器的前缀constprefixes=['webkit','moz','ms'];prefixes.forEach(prefix=>{document.addEventListener(`${prefix}visibilitychange`,this.handleVisibilityChange);});}handleVisibilityChange(){// 获取当前页面状态constisHidden=document.hidden||document.webkitHidden||document.mozHidden||document.msHidden;if(isHidden){this.onPageHidden();}else{this.onPageVisible();}}onPageHidden(){console.log('页面不可见时间:',newDate().toLocaleString());// 这里可以：// 1. 暂停媒体播放// 2. 停止不必要的动画// 3. 减少定时器频率// 4. 暂停数据拉取}onPageVisible(){console.log('页面重新可见:',newDate().toLocaleString());// 恢复页面活动}destroy(){document.removeEventListener('visibilitychange',this.handleVisibilityChange);}}// 使用示例constvisibilityMonitor=newPageVisibilityMonitor();兼容性处理
// 获取带有前缀的APIfunctiongetPageVisibilityAPI(){if(typeofdocument.hidden!=="undefined"){return{hidden:"hidden",visibilityChange:"visibilitychange"};}elseif(typeofdocument.webkitHidden!=="undefined"){return{hidden:"webkitHidden",visibilityChange:"webkitvisibilitychange"};}elseif(typeofdocument.mozHidden!=="undefined"){return{hidden:"mozHidden",visibilityChange:"mozvisibilitychange"};}elseif(typeofdocument.msHidden!=="undefined")<
)
