怎么知道用户离开了网页？5种方法告诉你答案
用户"离开页面"这个行为可以分成好几种情况：
切换到其他浏览器标签页或应用（页面看不见了，但没关闭）
最小化浏览器窗口（同上）
关闭浏览器标签页或整个浏览器
在当前标签页中打开新网址
在手机上切换到其他App或回到主屏幕
针对这些不同情况，前端开发有多种技术和方法可以判断用户是否离开了页面。
方法一：Page Visibility api（页面可见性API）——现代首选
这是判断"页面是否对用户可见"的标准方法。专门用来检测页面是否被隐藏或显示，特别适合处理用户切换标签页、最小化窗口等情况。
核心概念：
document.hidden：只读属性，如果页面在后台或最小化状态，返回true，否则返回false
visibilitychange事件：当页面可见状态变化时（即document.hidden值改变时），这个事件会在document对象上触发
适用场景：
暂停或播放视频、音频
停止或启动动画、轮播图
暂停向服务器发送请求，等页面恢复可见时再继续
示例代码：
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// 页面变得看不见了
console.log('用户离开了当前页面（切换标签页或最小化）');
// 在这里暂停视频、动画等
pauseMyVideo();
} else {
// 页面恢复可见
console.log('用户回到了当前页面');
// 在这里恢复播放
playMyVideo();
}
});优点：
标准可靠：W3C标准，所有现代浏览器都支持
性能好：专门设计，能节省CPU和电池电量
逻辑清楚：直接反映页面的"可见"状态
缺点：
无法判断用户是否正在关闭页面。当用户关闭标签页时，visibilitychange事件可能会触发（变为hidden），但无法区分这是切换标签页还是关闭页面。
方法二：beforeunload和unload事件——传统方法
1. beforeunload事件
在用户尝试关闭页面或刷新时触发。
window.addEventListener('beforeunload', function(e) {
// 可以显示确认对话框（现代浏览器可能限制自定义消息内容）
const confirmationMessage = '您有未保存的更改，确定要离开吗？';
e.returnValue = confirmationMessage; // 标准方法
return confirmationMessage; // 兼容旧版本浏览器
});2. unload事件
在页面完全卸载前触发，适合执行清理操作。
window.addEventListener('unload', function() {
// 发送数据到服务器（注意：可能被浏览器忽略）
navigator.sendBeacon('/api/logout', 'user-left');
});重大缺点：
unload事件不太可靠。浏览器在处理页面卸载时，不会等待unload事件中的异步操作（比如fetch或XMLHttpRequest）完成。这意味着，如果你想在这里发送数据到服务器，请求很可能在完成前就被浏览器中断了。
方法三：pagehide事件——应对往返缓存
pagehide事件和unload类似，但更可靠，特别是在移动设备上。
window.addEventListener('pagehide', function() {
// 执行清理操作
localStorage.setItem('lastActivity', Date.now());
});方法四：焦点事件（Focus/Blur）
检测窗口是否失去焦点。
window.addEventListener('blur', function() {
// 用户切换到其他窗口或标签页
console.log('窗口失去焦点');
pauseBackgroundTasks(); // 暂停后台任务
});
window.addEventListener('focus', function() {
// 用户回到当前窗口
console.log('窗口获得焦点');
resumeBackgroundTasks(); // 恢复后台任务
});方法五：鼠标和键盘活动检测
检测用户是否长时间没有操作。
let idleTimer;
function resetIdleTimer() {
clearTimeout(idleTimer);
idleTimer = setTimeout(() => {
console.log('用户可能已离开');
// 执行相应操作，比如暂停视频、停止动画
pauseAllActivities();
}, 30000); // 30秒没有操作认为用户离开
}
// 监听用户活动
document.addEventListener('mousemove', resetIdleTimer);
document.addEventListener('keypress', resetIdleTimer);
document.addEventListener('click', resetIdleTimer);
document.addEventListener('scroll', resetIdleTimer);
resetIdleTimer(); // 启动计时器实际应用示例
综合应用场景：视频网站
class PageVisibilityManager {
constructor() {
this.isPageVisible = !document.hidden;
this.isWindowFocused = true;
this.userIdleTimeout = null;
this.init();
}
init() {
// 页面可见性监听
document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
// 窗口焦点监听
window.addEventListener('blur', this.handleWindowBlur.bind(this));
window.addEventListener('focus', this.handleWindowFocus.bind(this));
// 用户活动监听
this.setupIdleDetection();
// 页面关闭监听
window.addEventListener('beforeunload', this.handleBeforeUnload.bind(this));
window.addEventListener('pagehide', this.handlePageHide.bind(this));
}
handleVisibilityChange() {
const isNowVisible = !document.hidden;
if (this.isPageVisible !== isNowVisible) {
this.isPageVisible = isNowVisible;
if (isNowVisible) {
console.log('页面恢复可见');
this.onPageVisible();
} else {
console.log('页面隐藏');
this.onPageHidden();
}
}
}
handleWindowBlur() {
this.isWindowFocused = false;
console.log('窗口失去焦点');
this.onWindowBlur();
}
handleWindowFocus() {
this.isWindowFocused = true;
console.log('窗口获得焦点');
this.onWindowFocus();
}
setupIdleDetection() {
const events = ['mousemove', 'keydown', 'click', 'scroll'];
const resetIdleTimer = () => {
if (this.userIdleTimeout) {
clearTimeout(this.userIdleTimeout);
}
this.userIdleTimeout = setTimeout(() => {
console.log('用户无操作超过30秒');
this.onUserIdle();
}, 30000);
};
events.forEach(event => {
document.addEventListener(event, resetIdleTimer);
});
resetIdleTimer(); // 初始化
}
handleBeforeUnload(event) {
// 检查是否有未保存的数据
if (this.hasUnsavedData()) {
const message = '您有未保存的更改，确定要离开吗？';
event.returnValue = message;
return message;
}
}
handlePageHide() {
// 保存数据到localStorage
this.saveCurrentState();
}
// 以下是业务逻辑处理
onPageVisible() {
// 恢复视频播放
// 继续轮询数据
// 恢复动画效果
}
onPageHidden() {
// 暂停视频播放
// 停止数据轮询
// 暂停动画效果
}
onWindowBlur() {
// 降低资源消耗
// 静音背景音乐
}
onWindowFocus() {
// 恢复正常资源消耗
// 恢复背景音乐
}
onUserIdle() {
// 显示屏保
// 暂停后台任务
// 降低能耗
}
hasUnsavedData() {
// 检查是否有需要保存的数据
return false; // 根据实际情况返回
}
saveCurrentState() {
// 保存当前状态到localStorage
localStorage.setItem('appState', JSON.stringify({
timestamp: Date.now(),
// 保存其他状态
}));
}
}
// 使用示例
const visibilityManager = new PageVisibilityManager();使用场景总结
Page Visibility API：最适合标签页切换检测
beforeunload：适合数据丢失警告
unload/pagehide：适合数据保存和清理
blur/focus：适合实时应用状态管理
鼠标键盘检测：适合长时间无操作场景
注意事项
性能考虑
避免在事件处理函数中做复杂计算
及时清理事件监听器，防止内存泄漏
合理设置检测间隔，不要过于频繁
用户体验
不要过度干扰用户
只在必要时显示确认对话框
尊重用户选择，不要强制保持页面
浏览器兼容性
检查浏览器是否支持相应API
提供降级方案
测试不同浏览器和设备上的表现
通过合理组合使用这些方法，不仅能准确判断用户的行为，还能在不影响性能和可靠性的前提下，提供更好的用户体验。关键是理解不同方法的特点和适用场景，根据实际需求选择合适的技术方案。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
