点击浏览器返回按钮无响应，popstate事件未触发求助

点击浏览器返回按钮时无任何反应，popstate事件未触发。代码如下：

$(document).ready(function() {
      if (window.history && window.history.pushState) {
        window.history.pushState('forward', null, './#forward');

        $(window).on('popstate', function() {
          alert('Back button was pressed.');
        });
      }
    });

该代码在控制台运行正常，但放入文件加载页面后，点击返回按钮会直接跳转到上一页，无弹窗提示。发现若不对页面进行点击、滚动等操作则无效，进行操作后popstate事件才会被触发。

原因分析 #

部分浏览器存在安全机制，禁止页面在无用户交互的情况下修改历史栈并触发popstate事件。页面加载完成后立即调用pushState属于无交互操作，浏览器会忽略该历史状态的触发逻辑，导致点击返回按钮直接跳转到上一页面，而非触发popstate事件。

解决方案 #

将历史栈初始化逻辑延迟到第一次用户交互（如点击、滚动、页面获得焦点）之后执行，确保浏览器认可该历史状态的有效性。

修改后的代码示例：

$(document).ready(function() {
  let historyInitialized = false;

  function setupHistoryHandler() {
    if (historyInitialized || !window.history?.pushState) return;

    // 初始化历史状态
    window.history.pushState('forward', null, '#forward');
    // 绑定popstate事件
    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });

    historyInitialized = true;
  }

  // 监听第一个用户交互事件触发初始化
  $(document).one('click scroll', setupHistoryHandler);
  $(window).one('focus', setupHistoryHandler);
});

额外注意事项 #

• 避免使用file://协议直接打开本地文件测试，建议在服务器环境（如本地开发服务器）中运行页面，history API在file://协议下行为可能异常。
• 路径中的./#forward可简化为#forward，避免路径解析问题。

内容的提问来源于stack exchange，提问作者Jhon Cuit