异常教程

onpagehide 事件（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 Web 开发中，页面与用户的交互远不止于点击按钮或输入表单。当用户关闭浏览器标签、切换到其他应用，或者页面被隐藏时，开发者可能需要执行一些特殊操作，例如保存未提交的数据、释放资源，或记录用户行为。这时，一个鲜为人知但极其重要的事件——onpagehide 事件，就派上了用场。本文将深入解析这一事件的核心概念、应用场景，以及如何通过代码实现其功能，帮助开发者掌握这一工具的实用价值。

什么是 onpagehide 事件？

onpagehide 事件是浏览器提供的一个页面生命周期事件，当页面即将被隐藏时触发。这里的“隐藏”包括多种场景：用户关闭标签页、切换到其他标签、最小化浏览器窗口，或是页面被其他弹窗覆盖。与之对应的事件还有 onpageshow（页面显示时触发）和 onpagehide 的近亲 onvisibilitychange（当页面可见性状态变化时触发）。

事件触发的直观比喻

可以将 onpagehide 事件想象成手机的“锁屏”功能：当用户锁屏时，手机会自动执行一些操作，比如停止后台应用的高耗能任务。同理，当页面被隐藏时，开发者可以通过监听 onpagehide，让网页执行类似“锁屏”时的操作，例如：

  • 保存草稿：用户在编辑文本框时切换标签页，自动保存输入内容；
  • 停止动画：暂停页面中的轮播图或计时器，避免资源浪费；
  • 上报统计：记录用户离开页面的时长，优化用户体验。

onpagehide 事件与 pagehide 的关系

在浏览器规范中，pagehide 是事件的实际名称，而 onpagehide 是 JavaScript 中监听这一事件的语法糖。具体来说：

// 监听 pagehide 事件的两种方式  
window.addEventListener("pagehide", (event) => {  
  console.log("页面即将被隐藏");  
});  

// 或者直接使用 onpagehide 属性  
window.onpagehide = (event) => {  
  console.log("页面即将被隐藏");  
};

与 pagevisibility 的对比

另一个常被提及的事件是 visibilitychange，它与 pagehide 的区别在于触发条件：

  • pagehide 仅在页面被隐藏时触发一次；
  • visibilitychange 在页面可见性状态变化时触发，包括进入隐藏或恢复显示两种情况。
事件类型触发场景触发频率
pagehide页面被隐藏（如关闭标签）每次隐藏触发一次
visibilitychange可见性变化（隐藏或显示）每次变化触发一次

如何正确使用 onpagehide 事件？

基础用法：监听页面隐藏

以下代码展示了如何在页面隐藏时执行简单操作：

window.onpagehide = function(event) {  
  // 判断页面是否正在被关闭（而非暂时隐藏）  
  if (event.persisted) {  
    console.log("页面是从缓存中恢复的，无需处理");  
  } else {  
    console.log("页面即将被隐藏，执行清理任务");  
    // 例如：停止动画  
    cancelAnimationFrame(requestId);  
  }  
};

进阶场景：保存用户输入

假设用户在填写表单时切换标签页，可以通过 onpagehide 自动保存数据：

let formContent = "";  

// 监听输入变化  
document.querySelector("textarea").addEventListener("input", (e) => {  
  formContent = e.target.value;  
});  

// 页面隐藏时保存数据  
window.onpagehide = function() {  
  localStorage.setItem("draft", formContent);  
  console.log("草稿已保存");  
};  

// 页面加载时恢复数据  
window.addEventListener("pageshow", (event) => {  
  if (!event.persisted) return; // 只在非缓存加载时恢复  
  const savedDraft = localStorage.getItem("draft");  
  document.querySelector("textarea").value = savedDraft || "";  
});

注意事项与常见问题

1. 区分页面隐藏与关闭

通过事件对象的 persisted 属性，可以判断页面是被隐藏（如切换标签）还是被关闭：

window.addEventListener("pagehide", (event) => {  
  if (!event.persisted) {  
    // 页面正在被关闭，执行持久化操作  
    saveDataToServer();  
  }  
});

2. 兼容性问题

尽管 pagehide 是现代浏览器的通用事件，但在某些旧版浏览器中可能不被支持。可通过以下代码检测兼容性：

if ("onpagehide" in window) {  
  // 安全使用 onpagehide  
} else {  
  // 回退方案，例如监听 unload 事件  
}

3. 避免阻塞操作

在 pagehide 事件中执行耗时任务（如 AJAX 请求）可能导致浏览器卡顿或任务被中断。此时可使用 beacon() 方法发送轻量级数据：

window.onpagehide = function() {  
  navigator.sendBeacon("/api/log", new URLSearchParams({ action: "exit" }));  
};

实战案例：优化视频播放体验

假设开发一个视频网站，用户切换标签时希望暂停视频并释放带宽：

const videoElement = document.querySelector("video");  

window.addEventListener("pagehide", () => {  
  videoElement.pause();  
  console.log("视频已暂停，减少带宽占用");  
});  

window.addEventListener("pageshow", () => {  
  videoElement.play(); // 恢复显示时重新播放  
});

结论

onpagehide 事件是开发者掌控页面生命周期的重要工具，尤其在需要处理资源管理、数据保存或用户体验优化的场景中不可或缺。通过结合代码示例与实际案例，我们看到它能够帮助开发者构建更智能、更高效的 Web 应用。掌握这一事件，不仅需要理解其触发条件与限制，还需结合业务场景灵活设计逻辑。随着 Web 开发的复杂性增加，善用这类“幕后”事件，将成为提升应用质量的关键一步。

最新发布

查看更多文章