HTML5历史记录API：从其他页面导航回来时未调用“popstate”

Question

我必须维护一个带有AJAX搜索表单的网站（比如书籍），我希望搜索结果成为浏览器历史记录的一部分。

所以我设置了“popstate”事件处理程序

window.addEventListener('popstate', function(e) {
    alert("popstate: " + JSON.stringify(e.state));
});

并在成功的AJAX请求时调用pushState（）：

var stateObj = { q: "harry potter" };
window.history.pushState(stateObj, "Result", "/search");

然后我的点击流是：

1. 使用搜索表单加载页面 - NORMAL请求 - 路径为/
2. 输入查询字符串并提交表单 - AJAX请求 - 路径更改为/ search
3. 单击搜索结果 - NORMAL请求 - 路径更改为/ books / harry-potter

---

4. 当我现在通过单击浏览器后退按钮返回时，我希望使用相应的状态对象触发“popstate”事件。但没有任何反应。 - 路径更改为/搜索

---

5. 当我再回去一次时，我会收到popstate: null的警报 - 路径更改为/
6. 当我继续前进后，我得到popstate: {"q":"harry potter"} - 路径更改为/搜索

---

因此，重要的popstate事件（带有查询字符串的事件）仅在前进时触发，但在返回时不会触发。

这是因为我从一个站点导航回来，其历史记录条目是由pushState自动创建而不是以编程方式创建的？但如果是这样，历史API只对完整的单页面应用程序有意义。

任何浏览器中的行为都是相同的。希望你能帮助我:)

Answer 1

对于想要更多解释为什么popstate事件仅在某些情况下发生的人，这有助于我：

在MDN popstate event page它说：

每当活动历史记录条目在同一文档的两个历史记录条目之间发生更改时，就会将popstate事件分派到窗口。

和

popstate事件仅在执行浏览器操作时触发，例如在同一文档的两个历史记录条目之间导航时，单击后退按钮（或在JavaScript中调用history.back（））。

因此，只有在导航到同一文档中的不同URL时才会调用popstate。这适用于SPA，但不适用于其他任何事情。

另外需要注意的是，html5 spec for session history在调用popstate事件时似乎没有太多的清晰度：

在导航到会话历史记录条目时，在某些情况下会触发popstate事件。

这可能表明不同的浏览器会以不同的方式对待它。

我希望得到更多来自其他人的见解