本文介绍如何在用户通过浏览器后退或前进按钮返回页面时可靠触发指定 JavaScript 函数，重点解决传统 performance.navigation API 失效的问题，并推荐使用 pageshow 事件配合 event.persisted 属性这一现代、兼容性佳的解决方案。
本文介绍如何在用户通过浏览器后退或前进按钮返回页面时可靠触发指定 javascript 函数，重点解决传统 `performance.navigation` api 失效的问题，并推荐使用 `pageshow` 事件配合 `event.persisted` 属性这一现代、兼容性佳的解决方案。
在单页应用或传统多页网站中，常需在用户通过浏览器「后退」或「前进」按钮回到当前页面时执行特定逻辑（如刷新数据、恢复表单状态、重置 UI 等）。但许多开发者尝试使用 performance.getEntriesByType('navigation') 判断导航类型时会发现：该方法仅在硬导航（hard navigation）场景下有效（例如 POST 后重定向），而对普通 GET 跳转（如 ）后的返回行为无法识别为 'back_forward' —— 因为此时 type 值为 'navigate'，导致逻辑失效。
根本原因在于：performance.navigation.type 及其替代方案 performance.getEntriesByType('navigation')[0].type 描述的是当前页面是如何被加载的，而非用户如何抵达该页面。当用户从 PAGE 2 返回 PAGE 1 时，若 PAGE 1 是从缓存中快速恢复（即 BFCache — Back/Forward Cache），该 API 并不会重新触发；即使触发，其值也未必反映“回退”意图。
✅ 正确且推荐的解决方案是监听 pageshow 事件：
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
console.log('页面从 BFCache 恢复，触发回退/前进逻辑');
themethod(); // 替换为你需要执行的函数
}
});? event.persisted 为 true 表示该页面是从浏览器的 BFCache 中恢复，这几乎总是对应用户点击了后退或前进按钮（极少数例外如 Android Chrome 的某些前台恢复场景，但不影响主流业务逻辑）。
立即学习“Java免费学习笔记（深入）”；
为什么 pageshow + persisted 更可靠？
- ✅ 兼容所有现代浏览器（Chrome 5+, Firefox 1.5+, Safari 5+, Edge 12+）；
- ✅ 不依赖导航方式（GET/POST/重定向/直接输入 URL 均适用）；
- ✅ 自动覆盖 BFCache 场景（现代浏览器默认启用，大幅提升返回体验）；
- ✅ 无需手动维护历史状态或 sessionStorage 标记，零侵入式。
注意事项与最佳实践
- ⚠️ 不要用 pagehide 替代：pagehide 在页面隐藏时触发（包括切换标签页、关闭窗口等），无法区分是否将进入 BFCache；
- ⚠️ 避免重复绑定：若代码可能多次执行（如 SPA 中组件反复挂载），建议添加防重复逻辑：
let pageshowHandlerBound = false; if (!pageshowHandlerBound) { window.addEventListener('pageshow', handlePageShow); pageshowHandlerBound = true; } - ✅ 可结合 beforeunload 或 visibilitychange 做增强：如需在页面即将离开时保存状态，再于 pageshow 中恢复，构成完整状态管理闭环；
- ? 服务端重定向不影响该机制：无论 PAGE 1 是由 302 重定向、JS location.href 还是原生链接跳转而来，只要返回时页面从缓存恢复，event.persisted 即为 true。
总结
放弃已废弃的 performance.navigation 和语义模糊的 navigation.type，拥抱标准化的 pageshow 事件是处理「返回/前进触发逻辑」的最佳实践。它简洁、健壮、跨场景通用，且与现代浏览器的 BFCache 机制深度协同。只需一行核心判断 if (event.persisted)，即可精准捕获用户意图，让 themethod() 在真正需要的时刻稳定运行。
