寻找跨文档监听会话历史变更的window事件（替代onpopstate）

先给你明确答案：popstate只负责同一文档内的历史切换，这和你看到的MDN说明一致，所以它搞不定跨文档的场景。

如果要跟踪用户通过前进/后退按钮在不同页面（比如A和B）之间的跨文档导航，你得用pageshow、pagehide这对事件，或者现代浏览器里的navigate事件，下面给你详细拆解：

1. 兼容性首选：pageshow + pagehide #

当用户通过前进/后退跳到另一个页面时，目标页面会触发pageshow事件，而原来的页面会触发pagehide事件。而且这个事件还能识别页面是不是从浏览器的往返缓存（bfcache）里恢复的——事件对象的persisted属性就是干这个的，能帮你区分是首次加载还是历史导航过来的。

给你写个实用的示例：

// 监听进入当前页面（包括前进/后退过来的情况）
window.addEventListener('pageshow', (event) => {
  const navType = event.persisted ? '从缓存恢复（历史导航）' : '首次加载';
  console.log(`进入页面：${window.location.href}，导航类型：${navType}`);
  // 这里可以加你的日志逻辑，比如记录用户是从哪个页面跳过来的，或者是前进/后退
});

// 监听离开当前页面（包括通过前进/后退走的情况）
window.addEventListener('pagehide', (event) => {
  console.log(`离开页面：${window.location.href}`);
  // 记录用户要去的目标页面或者导航方向
});

2. 现代浏览器推荐：navigate事件 #

这个事件是新出的，功能更全——不管是跨文档、同文档，还是前进/后退、刷新，它都能监听。而且直接通过navigationType属性就能拿到导航类型：'back'是后退，'forward'是前进，'push'是新开页面，'reload'是刷新，非常直观。

示例代码：

window.addEventListener('navigate', (event) => {
  switch(event.navigationType) {
    case 'back':
      console.log('用户点了后退按钮，来到当前页面');
      break;
    case 'forward':
      console.log('用户点了前进按钮，来到当前页面');
      break;
    default:
      console.log('其他类型的导航');
  }
  // 还能通过event.destination.url拿到目标页面的地址（跨文档时有用）
});

不过要注意，navigate事件目前只在Chrome、Edge等现代浏览器支持，要是需要兼容旧浏览器，还是优先用pageshow和pagehide。

最后再划个重点：

• 同文档内的历史切换（比如hash变化、pushState改历史）：用popstate
• 跨文档的前进/后退导航：用pageshow/pagehide（兼容广）或navigate（功能强）

内容的提问来源于stack exchange，提问作者Praveen Tiwari