问题描述
我必须维护一个带有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");
然后我的点击流是:
- 使用搜索表单加载页面-NORMAL请求-路径为/
- 输入查询字符串并提交表单-AJAX请求-路径更改为 /搜索
- 单击搜索结果-正常请求-路径更改为 / books / harry-potter
- Load the page with the search form - NORMAL request - path is /
- Enter a query string and submit the form - AJAX request - path changes to /search
- Click on a search result - NORMAL request - path changes to /books/harry-potter
- 当我现在回去 ,通过单击浏览器后退按钮,我希望使用相应的状态对象触发 popstate事件。但没有任何反应。- / search的路径更改
- 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
-
当我再回头一次 时,我收到一个警报,提示
popstate:null
-路径更改为/
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:
在它指出:
和
看起来只有在导航到不同时才调用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.
作为补充说明,对于何时调用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:
可能表明不同的浏览器会对此加以区别。
Which may indicate that different browsers will treat it differently.
我希望从其他任何人那里获得更多见识
I would love more insight from anyone else
这篇关于HTML5历史记录API:“ popstate”从另一个页面返回时未调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!