jquery - OS X Chrome 10.0.648.151 上的 HTML 历史状态问题

Question

我正在尝试了解如何使用 HTML5 的历史功能。这是我的基本代码:

$(document).ready(function () {
    var stateObj = { foo: "bar" };
    history.pushState(stateObj, "page 2", "bar.html");
    console.log(history.state);

    $(window).bind('popstate', function(e) {
            console.log(e.originalEvent);
    });
});

我正在使用 Jquery 1.5.1。这是控制台输出:

undefined

PopStateEvent
bubbles: false
cancelBubble: false
cancelable: true
clipboardData: undefined
currentTarget: DOMWindow
defaultPrevented: false
eventPhase: 2
returnValue: true
srcElement: DOMWindow
state: null
target: DOMWindow
timeStamp: 1300966328992
type: "popstate"
__proto__: PopStateEvent

我有两个问题:

1. 为什么 history.state 未定义？即使在 popstate 事件中，也什么都不存在。
2. 为什么还要调用 popstate？!我从不后退或前进。这是第一次加载。

希望有人能为我阐明这一点。

提前致谢!

肖恩

Answer 1

根据 FF 团队的说法，history.state 和不在页面加载时触发 popstate 是他们浏览器的功能。

这是他们笔记中的引述，地址为 http://hacks.mozilla.org/2011/03/history-api-changes-in-firefox-4/

• Always expose the current state through a window.history.state property. This way a page immediately gets access to the current state of the page and doesn’t have to wait until the first popstate event fires.
• Don’t always fire a popstate event right after the load event. Instead, only fire it during real session history transitions (i.e., when the user clicks Back or Forward or when history.back()/forward()/go() is called)

无论是什么功能，当供应商在实现上出现分歧时，都会令人沮丧。值得庆幸的是，您可以通过模拟规范并在页面加载时触发您自己的 popstate 事件来轻松处理差异。

像这样的东西应该在 FF4 中使用 jQuery 工作。您将在绑定(bind)事件处理程序后使用此代码。

$(document).ready(function () {
  if (history.pushState && typeof history.state !== 'undefined') {
    $(window).trigger({
      type: 'popstate',
      state: history.state
    });
  }
});

这种方法确实有利于规范，但它将状态管理整合到您的处理程序函数中，而不是初始化例程；哪个更容易维护。老实说，我很欣赏 history.state，但它是多余的，因为它只在页面加载期间有用；否则就变成了另一种变量存储机制。

类似地，避免一开始就调用 pushState()。状态不是一种变量，不应该这样使用。我只建议在响应用户操作时设置状态 - 即页面/应用加载之后。