盐城市网站建设_网站建设公司_展示型网站_seo优化

🚀 页面离场侦查术：如何精准判断用户离开你的网页？

你以为用户还在认真浏览？其实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")<