Question

如何获取我使用HTML5 History API设置的状态对象：

var stateObj = { foo: "bar" };
history.pushState(stateObj, null, url);

我在尝试：

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

它返回undefined。

谢谢！

Answer 1

我只需要从event.state获取window。

 alert(window.event.state);

Answer 2

顾名思义，pop状态事件仅在从历史记录中弹出事件时触发，而不是在将条目推入历史记录时触发。

在您的示例中，如果您有两个历史记录条目，则从服务器加载页面时发生的初始条目，以及您刚刚推送的页面的第二个条目。

当您按下浏览器后退按钮时，您在事件中获得的状态是从加载页面时开始的原始条目。 popstate事件为您提供当前所处的状态，而不是刚刚从堆栈中弹出的状态。有点混乱。

在您的示例中，如果您将两个条目推入堆栈，两个条目都有状态数据，然后点击后退按钮，您的事件处理程序应该显示您推入历史堆栈的第一个状态的状态数据。

Answer 3

这似乎与问题jQuery bind popstate event not passed中讨论的问题相同，并由KSev回答

总而言之，既然您正在使用jQuery，那么您将获得一个规范化的jQuery事件对象。访问原始事件对象的jQuery方法是通过originalEvent属性。因此，您的代码可以重写为：

$(window).bind('popstate', function(event) {
  alert(event.originalEvent.state);
});