监听
浏览器
后退事件的核心方法是使用 popstate 事件，1. 它在历史记录变化时触发，包括前进和后退；2. 可通过 event.state 获取状态数据并执行相应逻辑；3. 配合 history.pushstate() 或 replacestate() 使用可实现页面状态管理；4. 若应用使用 url hash，可监听 hashchange 事件；5. beforeunload 仅用于提示用户保存未完成数据，不应滥用以阻止后退；6. 避免使用隐藏 iframe 等不稳定方法；7. 单页应用中推荐结合前端路由库或手动同步 url 与页面状态；8. 为避免
数据丢失
，建议自动保存或提示用户；9. 不应过度干预后退行为，以免破坏用户体验和用户习惯，影响产品满意度。
监听JS浏览器后退，本质上是捕获浏览器的历史记录变化，并执行相应的操作。虽然不能完全“拦截”后退（因为这会破坏用户体验），但我们可以利用一些技巧来感知并处理后退事件，例如弹出提示、保存数据或执行其他逻辑。
解决方案
事件：
这是最常用的方法。
事件会在浏览器的历史记录发生变化时触发，包括前进和后退。
需要注意的是，
事件只会在通过
或
方法改变历史记录时触发，直接点击浏览器的后退/前进按钮也会触发。首次加载页面时，
不会触发。
事件：
如果你的应用使用了 URL hash（
）进行导航，可以使用
事件。
这种方法比较简单，但依赖于 URL hash 的使用，现在很多单页应用已经不再推荐使用 hash 路由。
事件（不推荐用于拦截后退）：
事件在窗口即将卸载时触发，例如关闭浏览器、刷新页面或导航到另一个页面。虽然可以利用它来显示一个确认对话框，但
不建议用它来拦截后退
，因为这会严重影响用户体验。
使用
应该非常谨慎，只在用户可能丢失未保存数据的情况下使用。过度使用会导致用户反感。
隐藏
popstatepopstatewindow.addEventListener('popstate', function(event) {
// 你的处理逻辑，例如：
console.log("用户尝试后退/前进");
// 检查 event.state，如果存在，说明是通过 pushState/replaceState 改变的
if (event.state) {
console.log("state:", event.state);
} else {
console.log("首次加载或通过其他方式导航");
}
// 可以在这里执行页面更新、数据保存等操作
});
// 示例：使用 pushState 添加历史记录
history.pushState({ page: 1 }, "Page 1", "?page=1");popstatehistory.pushState()history.replaceState()popstatehashchange#hashchangewindow.addEventListener("hashchange", function(event) {
console.log("URL hash changed!");
console.log("Old URL:", event.oldURL);
console.log("New URL:", event.newURL);
// 根据新的 hash 值执行相应的操作
});
// 示例：改变 URL hash
window.location.hash = "page2";beforeunloadbeforeunloadwindow.addEventListener("beforeunload", function(event) {
// 显示确认对话框
event.preventDefault();
event.returnValue = "确定要离开此页面吗？"; // 兼容旧版本浏览器
return "确定要离开此页面吗？"; // 现代浏览器
});beforeunload