非SPA场景下用JS/JQuery检测浏览器后退按钮点击问题求助

你的问题核心在于非SPA页面是整页刷新机制，之前绑定的popstate事件之所以无效，是因为：

1. 若你在首页绑定事件，跳转到/about后首页的脚本已被卸载，事件不复存在；
2. 即使在/about页面绑定，默认情况下点击后退时浏览器会直接卸载/about页面、加载首页，不会触发当前页面的popstate事件。

下面给你两种可行的解决方案：

方案一：利用beforeunload事件（简单直接） #

该事件会在页面即将卸载时触发（包含后退、关闭标签、刷新等场景），可以实现弹出提示的需求。注意：现代浏览器对自定义提示文本有限制，部分浏览器会显示默认提示，但能触发提示行为。

在/about页面的脚本中添加：

window.addEventListener('beforeunload', function(e) {
  const tipText = '用户点击了浏览器按钮';
  // 兼容不同浏览器的设置方式
  e.returnValue = tipText;
  return tipText;
});

方案二：结合pushState与popstate（精准针对后退行为） #

通过手动添加一条历史记录，让后退操作先触发popstate事件（此时仍在/about页面），再手动跳转到首页，实现仅后退时提示的效果。

在/about页面的脚本中添加：

window.addEventListener('load', function() {
  // 添加一条与当前URL一致的历史记录，扩充历史栈
  history.pushState({ page: 'about' }, '', window.location.href);

  // 绑定popstate事件
  window.addEventListener('popstate', function() {
    alert('用户点击了浏览器按钮');
    // 手动跳转到首页
    window.location.href = '/';
  });
});

原理说明 #

• 正常导航后历史栈为：[/, /about]，添加pushState后变为[/, /about, /about]；
• 点击后退按钮时，先触发popstate事件（此时历史栈回到[/, /about]），弹出提示后我们手动跳转到首页，完成需求。

内容的提问来源于stack exchange，提问作者Ashutosh Jha