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

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

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

Answer 3

您正在阅读 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"