popstate事件触发时机、依赖条件及示例疑问解析

核心问题解答 #

• popstate在点击后退/前进时触发属于浏览器默认行为吗？
  是的，但触发有前提：只有当切换的历史记录条目是通过pushState()/replaceState()创建/修改的，或是同一文档内哈希（#）变化产生的历史条目时，才会触发该事件。

• 非SPA场景下，点击链接加载完整页面，URL变化但未调用pushState/replaceState，点击后退不会触发popstate？
  你的理解完全正确。这种场景下的历史记录是浏览器自动为跨文档导航生成的，切换时会加载全新的文档实例，而popstate仅在同一文档实例的历史栈发生切换时才会触发，因此此时点击后退不会触发popstate。

三个示例的具体解释 #

示例1 #

当前处于example.com/home，导航至example.com/home#s1（页面未重载，同一文档）：

• 手动导航到该哈希（比如点击锚点链接）的过程中不会触发popstate；但当你点击浏览器后退按钮回到example.com/home时，会触发popstate事件——因为这是同一文档内的历史条目切换。

示例2 #

当前处于example.com/home#s1，导航至example.com/home（页面重载，文档实例不同）：

• 点击后退按钮回到example.com/home#s1时，不会触发popstate事件。因为两次导航都是加载全新的文档实例，不属于同一文档内的历史栈切换，popstate不生效。

示例3 #

在example.com执行以下代码，导航至example.com/#about后点击后退按钮：

var o = {x: 1}
history.replaceState(o, '');

window.onpopstate = function(e) {
    console.log(e.state === o);
}

控制台会输出true。原因是：

1. history.replaceState(o, '')把当前历史条目的state替换成了对象o；
2. 导航到example.com/#about会新增一条state为null的历史记录；
3. 点击后退按钮切换回被修改过的历史条目时，popstate事件触发，e.state就是之前的对象o，因此全等比较结果为true。

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