Javascript HTML5历史API:；popstate“；从另一页导航回时未调用

我必须维护一个带有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");

那么我的点击流是：

使用搜索表单加载页面-正常请求-路径为/

输入查询字符串并将表单-AJAX请求-path更改提交到/search

单击搜索结果-正常请求-路径更改为/books/harry potter

---

当我现在通过单击浏览器后退按钮返回时，我希望“popstate”事件会被相应的state对象触发。但什么也没发生。-路径更改为/search

---

当我再次返回时，我收到一个带有

popstate:null

-路径更改为/

当我在这之后继续前进时，我得到了

popstate:{“q”：“harry potter”}

-路径更改为/search

---

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

这是因为我从一个站点返回，该站点的历史记录条目是由pushState自动创建的，而不是由pushState以编程方式创建的？ 但如果是这样，历史API将只适用于完整的单页应用程序

---

在任何浏览器中，行为都是相同的。希望您能帮助我：）

对于任何想进一步解释为什么popstate事件只在某些情况下发生的人，这对我有帮助：

在报告中指出：

每次活动历史记录条目在同一文档的两个历史记录条目之间发生更改时，都会向窗口发送popstate事件

及

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

因此，看起来只有在导航到同一文档中的不同URL时才会调用popstate。这对水疗很有效，但对其他任何东西都无效

作为补充说明，对于何时调用popstate事件，似乎没有太多的明确性：

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

这可能表明不同的浏览器会对其进行不同的处理

---

我希望从其他人那里获得更多的见解

Popstate只在URL更改但您仍在同一页面时触发。因此，当您在/books/harry potter/中按下后退按钮时，您只需加载/search/即可，并且不会触发popstate事件。因此，一个解决办法是：在/search/页面加载时，您必须读取URL并提取搜索查询。谢谢您的回答，但是“仅当URL更改时”是什么意思？URL一直在更改（从/to/search、从/search到/books等）。假设您位于/search/{query2}，然后按back。。。URL将更改为/search/{query1}，由于文档上下文仍然与/search/{query1}中的上下文相同，因此会触发一个popstate事件。相反，当您在/books/harry potter/上按back键时，URL将发生更改，整个文档将替换为/search/{query2}-由于它是不同的文档上下文，因此不会触发popstate事件。如果一个用户出现在你的搜索页面上&然后直接转到谷歌，然后按下后退。。。“返回”操作没有发生在您的网页上，因此popstate不会发生。啊，这都是关于文档上下文的，谢谢！因此，正如我在问题中提到的，History API实际上只适用于单页应用程序。我在网上找不到关于这一点的任何信息。恰恰相反，德国mozilla文档完全是误导性的：根据他们的说法，当你导航到一个完整的其他页面（如google）并返回时，会触发一个popstate事件。即使在原始的英文文档中，你也可以找到这一段，但至少删掉了@DarrylHuffman但不幸的是，您的解决方法（从URL提取查询）对我没有多大帮助，因为在来回导航时，javascript并不能在所有浏览器中可靠地调用。