浏览器前进/后退操作时window.popstate事件未触发问题咨询

这是完全符合HTML规范的预期行为，不是浏览器bug，核心是对popstate事件的触发规则存在认知偏差：
popstate事件的触发有严格的前置条件，并非所有历史条目切换动作都会触发该事件，只有两类场景浏览器会派发该事件：

• 单页应用场景下（不刷新、不跳转独立HTML页面），通过history.pushState()/history.replaceState()方法创建/修改历史条目后，点击前进、后退按钮在这些自定义历史条目之间切换时
• 跨独立页面的前进、后退导航场景下，只有即将激活的目标历史条目关联的state属性值不为null（即该条目曾被pushState/replaceState写入过自定义状态数据），才会触发popstate

你的测试用例里，MainPage和SecondPage都是通过location.assign触发的常规页面跳转，两个页面对应的历史条目从来没有被写入过自定义state，默认state值都是null。这种场景下点击前进后退，浏览器直接执行常规的文档加载流程，根本不会派发popstate事件——和BFCache是否启用、用户有没有和页面产生交互都没有关系。
你之前看到的事件规则说明只描述了事件触发的大背景，没有写清上述核心前置限制，才会造成预期偏差。

根据实际需求可以选两种稳定的实现方式：

• 如果你确实需要在跨页面前进后退时触发popstate，只需要在每个页面加载完成后，立刻给当前页面对应的历史条目写入一个非空的state值即可，代码如下：

  // 两个页面的脚本开头都加上这行，不会新增历史条目、不会触发页面刷新
  history.replaceState({pagePath: location.pathname}, document.title);
  

  执行完这行代码后，当前页面对应的历史条目就有了非null的state值，后续在这些页面之间点击前进、后退按钮时，popstate事件就会按预期触发。
• 如果你的需求只是感知跨页面前进后退的导航时机，不需要依赖History API做状态管理，直接监听pageshow和pagehide事件即可。这两个事件是专门为页面导航场景设计的，不管历史条目有没有自定义state、不管BFCache是否启用，在常规页面跳转、前进后退导航时都会稳定触发，适配性比popstate更好。

内容的提问来源于stack exchange，提问作者Alexandre M