小编jar*_*ccc的帖子

我必须维护一个带有 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. 使用搜索表单加载页面 - 正常请求 - 路径为 /
2. 输入查询字符串并提交表单 - AJAX 请求 - 路径更改为/search
3. 单击搜索结果 - 正常请求 - 路径更改为/books/harry-potter

4. 当我走了回去通过点击浏览器的后退按钮，我会希望与根据状态对象触发了“popstate”事件。但什么也没有发生。-路径更改为 /search

5. 当我再回去一次时，我收到一条警告，其中popstate: null -路径更改为 /

6. 当我在那之后继续前进时，我得到popstate: {"q":"harry potter"} -路径更改为 /search

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

这是因为我从一个站点导航回来，它的历史条目是自动创建的，而不是由 pushState 以编程方式创建的？但如果是这样，History API …