如何用原生JavaScript捕获页面跳转并提前更新信息？

我明白你的需求——之前的方案依赖jQuery，但你需要纯原生JS的实现，覆盖点击导航按钮、页面链接，甚至浏览器返回按钮的场景，确保跳转前完成信息清理和更新。下面分场景给你详细的解决方案：

一、处理页面内的链接点击 #

对于页面上的<a>标签链接，我们可以用事件委托来统一处理，阻止默认跳转行为，先执行你的清理更新逻辑，完成后再手动跳转。这种方式适合内部链接，能确保异步操作（比如发请求、保存数据）完成后再跳转。

// 给整个文档绑定点击事件，统一处理链接
document.addEventListener('click', async function(e) {
  // 找到被点击的链接元素（考虑嵌套情况，用closest）
  const targetLink = e.target.closest('a');
  if (!targetLink) return;

  // 过滤不需要处理的链接：比如新开窗口的、外部域名的链接（可根据需求调整）
  const isExternalLink = targetLink.host !== window.location.host;
  const isBlankTarget = targetLink.target === '_blank';
  if (isExternalLink || isBlankTarget) {
    return;
  }

  // 阻止默认跳转行为
  e.preventDefault();

  try {
    // 👇 这里替换成你的实际清理更新逻辑
    // 示例：清理临时缓存数据
    localStorage.removeItem('tempUserDraft');
    // 示例：异步发送状态更新请求到后端
    await fetch('/api/update-user-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: 'cleaned' })
    });

    // 所有操作完成后，手动跳转至目标页面
    window.location.href = targetLink.href;
  } catch (error) {
    console.error('清理更新操作失败:', error);
    // 失败后的兜底处理：可以提示用户，或者直接允许跳转
    window.location.href = targetLink.href;
  }
});

二、处理浏览器前进/后退按钮（popstate事件） #

浏览器的前进、后退按钮会触发popstate事件，这种场景下如果是传统多页应用，页面会直接卸载，所以我们需要结合beforeunload事件来处理；如果是单页应用（SPA），则可以直接在popstate事件中先执行清理逻辑，再更新页面内容。

1. 传统多页应用场景 #

传统页面跳转时会卸载当前页面，所以用beforeunload事件在页面卸载前执行同步的清理操作（注意：异步操作可能因页面快速卸载而无法完成，所以这里只适合同步逻辑）：

window.addEventListener('beforeunload', function(e) {
  // 👇 执行同步的清理操作
  // 示例：清理内存中的临时变量
  window.tempUserData = null;
  // 示例：同步保存数据到localStorage
  localStorage.setItem('lastCleanTime', new Date().toISOString());

  // 如果需要提示用户确认离开，可以设置returnValue（部分浏览器会忽略自定义文本）
  // e.returnValue = '你有未保存的内容，确定要离开吗？';
});

2. 单页应用（SPA）场景 #

SPA的路由跳转不会卸载页面，所以可以直接监听popstate事件，先完成清理更新，再更新页面内容：

// 监听前进/后退事件
window.addEventListener('popstate', async function(e) {
  try {
    // 先执行清理更新逻辑
    await cleanupAndUpdate();
    // 根据历史记录中的状态，渲染对应页面
    renderPage(e.state?.pagePath || '/');
  } catch (error) {
    console.error('处理前进后退失败:', error);
    renderPage(e.state?.pagePath || '/');
  }
});

// 手动触发路由跳转的函数（比如导航按钮点击时调用）
async function navigateTo(pagePath) {
  await cleanupAndUpdate();
  // 更新历史记录并渲染页面
  history.pushState({ pagePath }, '', pagePath);
  renderPage(pagePath);
}

// 通用的清理更新函数
async function cleanupAndUpdate() {
  // 你的异步/同步逻辑都可以放在这里
  await saveUserDraft();
  clearPageTempData();
}

三、关键注意事项 #

• 异步操作要确保完成：在链接点击的处理中，一定要用async/await等待异步操作完成后再跳转，否则页面可能在操作完成前就跳走了。
• beforeunload的限制：这个事件中尽量只做同步操作，异步请求大概率会被浏览器中断，无法保证执行完成。
• 测试兼容性：不同浏览器对beforeunload的提示文本限制不同，大部分浏览器只会显示默认提示，自定义文本可能无效。

内容的提问来源于stack exchange，提问作者George Hernando