如何不使用pushstate捕获浏览器后退按钮？解决历史篡改问题

我完全懂你为啥不想用pushState——它会乱改历史记录栈，很容易打破用户对后退按钮的原生预期，用起来特别别扭。下面给你分享几个完全不需要修改历史栈的可行方案：

方案1：监听popstate事件（无需额外添加历史条目） #

虽然你之前提到pushState会搞乱历史，但其实单纯监听popstate事件根本不需要预先添加自定义历史条目。当用户点击后退按钮时，浏览器的历史栈会发生变化（比如从当前页跳回上一页），popstate就会触发。你可以在这个事件里执行自定义逻辑，甚至在单页应用场景下阻止页面的默认跳转行为。

示例代码：

window.addEventListener('popstate', function(event) {
  // 在这里写你的自定义逻辑，比如弹出确认弹窗、切换页面内容等
  console.log('用户点击了后退按钮');
  
  // 如果是单页应用，想阻止页面跳转的话可以加这行（别随便用，避免违背用户直觉）
  event.preventDefault();
  // 比如在这里切换页面内容，而不是让浏览器真的跳走
});

注意：如果当前页面没有通过pushState或replaceState添加过自定义历史条目，popstate触发时浏览器本来会导航到上一个历史页面。用event.preventDefault()可以阻止这个行为，但一定要谨慎使用，别破坏用户的原生操作习惯。

方案2：利用beforeunload事件（页面卸载前提示） #

如果你只是想在用户点击后退（导致页面卸载）前做提示或拦截，beforeunload事件是个简单直接的选择。它会在页面即将卸载时触发，包括用户点击后退、刷新、关闭标签页等场景。

示例代码：

window.addEventListener('beforeunload', function(event) {
  // 自定义提示文本（注意：现代浏览器大多会忽略自定义文本，显示默认提示）
  const message = '你确定要离开吗？未保存的内容可能会丢失哦';
  event.returnValue = message;
  return message;
});

局限性：这个事件没法区分用户是点击后退还是其他触发页面卸载的操作（比如刷新），而且现代浏览器对自定义提示文本的支持很有限。

方案3：监听鼠标/键盘事件（针对快捷键或物理按钮） #

如果你想专门针对浏览器的后退按钮（比如Chrome的后退箭头）或者快捷键（Alt+左箭头、Cmd+左箭头）做处理，可以监听鼠标点击事件或者键盘事件。

监听后退快捷键 #

document.addEventListener('keydown', function(event) {
  // 检测Windows/Linux的Alt+左箭头，或者Mac的Cmd+左箭头
  if ((event.altKey && event.key === 'ArrowLeft') || (event.metaKey && event.key === 'ArrowLeft')) {
    console.log('用户用快捷键触发了后退');
    // 这里写自定义逻辑，或者阻止默认行为
    event.preventDefault();
  }
});

监听浏览器后退按钮点击（兼容性差，不推荐） #

浏览器的后退按钮属于浏览器UI，通常没法直接监听点击事件，虽然有一些间接方法（比如监听visibilitychange事件），但这些方法在不同浏览器里表现不一致，不建议在生产环境使用。

总结 #

• 单页应用优先选方案1：监听popstate事件，按需阻止默认跳转并处理自定义逻辑，完全不会修改历史栈。
• 只需页面离开前提示用户的话，用方案2：beforeunload事件简单可靠。
• 针对快捷键场景可以用方案3的键盘监听，但别过度拦截用户的原生操作。

内容的提问来源于stack exchange，提问作者Neha Gupta