Question

为什么

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

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

不会提醒pop？

注意：测试最新的Chrome

-

根据MDN：

每次活动历史记录条目更改时，都会将popstate事件分派到窗口。如果正在激活的历史记录条目是通过调用pushState创建的或受对replaceState的调用影响而创建的，则popstate事件的state属性包含历史记录条目的状态对象的副本。

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

Answer 1

每次致电popstate时，您都可以window手动触发history.pushState()个活动。

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

var popStateEvent = new PopStateEvent('popstate', { state: state });
dispatchEvent(popStateEvent);

Answer 2

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

Answer 3

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

请考虑阅读MDN的"documentation page" for WindowEventHandlers.onpopstate：

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

Answer 4

我的解决方案：

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

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

Answer 5

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

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

Answer 6

我也碰到了这个...我认为如果你的数据对象的顶层有一些与以前状态不同的东西，那么事件才会触发。

试试这个：

var data = {rand: Math.random()};
window.history.pushState(data, '', '/foo');

Answer 7

不确切知道您要实现的目标，但是如果您只想启动popState事件处理程序，则可以将其提取到如下所示的函数中：

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

然后，您可以在pushState之后简单地调用popStateHandler。

history.pushState不会触发'popstate'事件

7 个答案: