HTML5历史记录API：“ popstate”从另一个页面返回时未调用 [英] HTML5 History API: "popstate" not called when navigating back from another page

问题描述

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

I have to maintain a site with an AJAX search form (for lets say books) and I want the search results to be a part of the browser history.

因此，我设置了 popstate 事件处理程序

So I set the "popstate" event handler

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

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

and call pushState() upon the successfull AJAX request:

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

然后我的点击流是：

1. 使用搜索表单加载页面-NORMAL请求-路径为/


2. 输入查询字符串并提交表单-AJAX请求-路径更改为 /搜索


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

1. Load the page with the search form - NORMAL request - path is /
2. Enter a query string and submit the form - AJAX request - path changes to /search
3. Click on a search result - NORMAL request - path changes to /books/harry-potter

---

---

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

1. When I now go back by clicking the browser back button I would expect the "popstate" event to be triggered with the according state object. But nothing happens. - path changes to /search

---

---

1. 当我再回头一次 时，我收到一个警报，提示 popstate：null -路径更改为/

1. When I then go back one more time I get an alert with popstate: null - path changes to /

然后当我前进 forward 之后，我得到 popstate：{ q：哈利·波特} - / search的路径更改

And when I go forward after that, I get popstate: {"q":"harry potter"} - path changes to /search

---

因此，重要的popstate事件（带有查询字符串的事件）仅在以下情况下触发

这是因为我正在从一个站点导航回来，该站点的历史记录条目是自动创建的，而不是通过pushState编程地创建的？
但是，如果是这样，History API仅对完整的单页应用程序有意义。

Is this because im navigating back from a site, whose history entry has been created automatically instead of programmatically by pushState? But if so, the History API would only make sense for complete single page applications.

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

Behaviour is the same in any browser. Hope you can help me out :)

推荐答案

对于任何想更多解释为何popstate事件仅在某些情况下发生的人场景，这对我有帮助：

For anyone wanting a little more explanation as to why the popstate event only occurs in certain scenarios, this helped me:

在 MDN popstate事件页面它指出：

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

A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document.

和

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

看起来只有在导航到不同时才调用popstate在同一文档中租用网址。这非常适合SPA，但不适用于其他任何东西。

So it looks like popstate is only called when navigating to different urls within the same document. This works great for SPAs but not for anything else.

作为补充说明，会话历史记录的html5规范对于何时调用popstate事件似乎不太清楚：

As an additional note, the html5 spec for session history doesn't seem to have much clarity as to when the popstate event is called:

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

The popstate event is fired in certain cases when navigating to a session history entry.

可能表明不同的浏览器会对此加以区别。

Which may indicate that different browsers will treat it differently.

我希望从其他任何人那里获得更多见识

I would love more insight from anyone else

这篇关于HTML5历史记录API：“ popstate”从另一个页面返回时未调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！