如何在浏览器前进/后退时无刷新执行JS函数并渲染下拉项？

1. 如何检测前进或后退按钮的点击操作？ #

• 同文档内历史记录切换：可通过监听历史状态变化事件捕捉，浏览器前进/后退触发的同文档内历史状态变更会被对应事件捕获。
• 跨文档（前一页为完全不同的文档）场景：无法直接通过前端事件精准检测按钮点击，但可在页面加载时，通过导航类型判断是否是通过前进/后退进入当前页。

2. 该场景下最佳使用的事件是什么？ #

优先推荐使用popstate事件，但需注意正确用法：

• popstate仅在同文档内的历史状态变化时触发（比如通过history.pushState/replaceState添加的历史记录），这也是单页应用处理前进后退的标准方案。
• 若需覆盖跨文档场景，可结合页面加载时的导航类型判断：

  // 页面加载时判断是否通过前进/后退进入
  const navEntry = performance.getEntriesByType("navigation")[0];
  if (navEntry.type === "back_forward") {
    // 执行GET请求与下拉项渲染逻辑
    fetchDropdownOptions();
  }
  

• 你之前尝试的hashchange事件仅在URL哈希值变化时触发，仅适用于哈希路由场景，对你的业务无效属于正常情况。

3. 页面刷新问题的原因分析 #

你遇到的页面刷新问题，主要源于以下几点：

• showpage事件触发时机晚于页面显示，部分浏览器中该事件会伴随默认页面重载行为，引发刷新。
• 若事件处理函数中存在触发刷新的逻辑（比如调用location.reload()、错误修改location.href），或事件绑定不当触发冒泡导致其他刷新行为，也会引发页面刷新。
• performance.getEntriesByType("navigation")[0].type有时不满足条件，是因为该API仅能检测页面初始加载时的导航类型，同文档内的前进后退（比如pushState添加的历史）不会更新这个值，因此无法捕获这类场景。

无刷新尽早执行函数的实现方案 #

同文档内前进后退处理 #

// 监听popstate事件，同文档内前进后退会触发
window.addEventListener('popstate', (event) => {
  // 可通过event.state获取pushState时存入的状态数据
  // 尽早执行下拉项渲染逻辑
  fetchDropdownOptions();
});

// 每次修改历史记录时，用pushState存入必要状态
function updatePageHistory(stateData) {
  history.pushState(stateData, '', window.location.href);
}

跨文档前进后退处理 #

在页面加载的最早期执行导航类型判断，保证逻辑尽早触发：

// 直接在脚本同步执行，比DOMContentLoaded更早
(function() {
  const navEntry = performance.getEntriesByType("navigation")[0];
  if (navEntry.type === "back_forward") {
    fetchDropdownOptions();
  }
})();

注意事项 #

• 事件处理函数中禁止调用任何触发页面刷新的API（如location.reload()、直接修改location.href）。
• 确保fetchDropdownOptions为异步逻辑，避免阻塞页面渲染，同时需处理重复触发的情况（比如连续点击前进后退）。

内容的提问来源于stack exchange，提问作者Omima Khaled