24

为什么

$(function () {
  $(window).bind('popstate', function () {alert('pop');});

  window.history.pushState(null, '', '/foo');
});

不警觉pop？

注意：在最新的 chrome 上进行测试

--

根据MDN：

每次活动历史条目更改时，都会向窗口发送一个 popstate 事件。如果被激活的历史条目是由对 pushState 的调用创建的或受对 replaceState 的调用的影响，则 popstate 事件的 state 属性包含历史条目的 state 对象的副本。

那么为什么我的pushState不触发popstate事件呢？

4

7 回答 7

52

您可以在每次调用时手动触发popstate事件。windowhistory.pushState()

history.pushState(state, '', url);

var popStateEvent = new PopStateEvent('popstate', { state: state });
dispatchEvent(popStateEvent);
于 2016-05-27T20:52:22.243 回答
15

您引用的段落有点模棱两可。阅读同一页面上的示例，很明显 popstate 仅在用户单击后退按钮时触发，而不是在脚本调用时触发pushState()。

于 2012-06-08T10:41:08.097 回答
8

您正在阅读 MDN 的“指南页面”，这并不意味着规范。

考虑阅读 MDN 的“文档页面”来WindowEventHandlers.onpopstate代替：

请注意，仅调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。popstate 事件只能通过执行浏览器操作来触发，例如单击后退按钮（或在 JavaScript 中调用 history.back()）。并且仅当用户在同一文档的两个历史条目之间导航时才会触发该事件。

另一种未记录的触发方式popstate是直接操纵window.location对象。

// this also triggers popstate 
window.location.hash = "#some-new-hash"
于 2014-10-10T21:48:34.897 回答
3

我的解决方案：

var url = "http://awesome.website.net/route/to/paradise";
window.history.pushState({}, "", url);
window.history.pushState({}, "", url); // yes twice
window.history.back();

它将通过“popstate”事件触发软导航，并且没有 HTTP 请求。

于 2014-09-14T03:37:37.317 回答
-1

我也遇到了这个......我认为只有在数据对象的顶层有与之前状态不同的东西时才会触发该事件。

试试这个：

var data = {rand: Math.random()};
window.history.pushState(data, '', '/foo');
于 2012-09-13T17:59:39.700 回答
-1

文档https://developer.mozilla.org/en-US/docs/Web/Events/popstate说：

请注意，仅调用history.pushState()orhistory.replaceState()不会触发 popstate 事件。popstate 事件将通过执行浏览器操作来触发，例如单击后退或前进按钮（或调用history.back()或history.forward()在 JavaScript 中）。

于 2017-02-09T06:36:36.300 回答
-2

不知道你在哪里试图实现，但如果你只是想让你的 popState 事件处理程序启动，你可以简单地将它提取到如下函数中：

function popStateHandler(event) {
     // Event handling Code here
}
window.onpopstate = popStateHandler;

然后你可以在 pushState 之后简单地调用你的 popStateHandler。

于 2018-11-21T03:54:27.503 回答