本文介绍如何可靠捕获用户通过浏览器前进/后退按钮（而非普通跳转）返回页面的场景，并在页面恢复时执行指定函数，重点解决 performance.navigation 已废弃及 navigate 类型无法区分真实导航来源的问题。
本文介绍如何可靠捕获用户通过浏览器前进/后退按钮（而非普通跳转）返回页面的场景，并在页面恢复时执行指定函数，重点解决 `performance.navigation` 已废弃及 `navigate` 类型无法区分真实导航来源的问题。
在现代 Web 开发中，常需在用户通过浏览器「后退」或「前进」按钮返回某页面时触发特定逻辑（例如刷新数据、重置表单、恢复滚动位置等）。但直接依赖 performance.getEntriesByType('navigation') 或已废弃的 performance.navigation.type 存在明显局限：它仅在页面首次加载时有效，且将「从 Page2 后退到 Page1」与「用户手动输入 URL 或点击普通链接跳转到 Page1」均识别为 navigate，导致无法精准区分。
例如，当 Page1 通过 POST 重定向至 Page2 后，再后退时 navigation[0].type 可能为 'back_forward'；但若 Page1 是通过 GET 链接跳转（无重定向），则后退时该值恒为 'navigate'——这使得原方案在多数实际场景中失效。
✅ 推荐解决方案：使用 pageshow 事件 + event.persisted
pageshow 是页面被显示时触发的标准事件（包括首次加载和往返缓存恢复），其 event.persisted 属性是关键判断依据：
立即学习“Java免费学习笔记（深入）”；
- true：页面从 bfcache（Back/Forward Cache）中恢复（即用户点击了后退/前进按钮，且页面未被销毁）；
- false：页面为常规加载（含刷新、新标签页打开、普通链接跳转等）。
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
console.log('页面从 bfcache 恢复 —— 用户点击了后退或前进按钮');
themethod(); // 替换为你需要执行的逻辑
}
});? 注意：pageshow 在首次加载时也会触发（event.persisted === false），因此必须显式检查 event.persisted，不可仅监听该事件就执行业务逻辑。
? 补充说明与最佳实践：
- bfcache 在现代 Chrome、Firefox、Safari（桌面及 iOS）中默认启用，但可能因以下原因失效：页面监听了 beforeunload、存在未完成的 fetch() 请求、使用了 document.write()、或启用了某些调试工具。可通过 chrome://settings/bfcache（Chrome）验证状态。
- 若需兼容极旧浏览器（如 IE），可降级使用 pagehide + sessionStorage 标记 + load 事件组合方案，但现代项目应优先采用 pageshow。
- 避免在 themethod() 中执行阻塞操作；如涉及异步请求，请确保处理加载状态与错误边界。
综上，window.addEventListener('pageshow', ...) 结合 event.persisted 是目前最标准、可靠且无需 polyfill 的方式，完美替代已废弃的 performance.navigation API，适用于所有主流浏览器及各类导航路径（GET/POST/重定向/SPA 路由等）。
