Проблемы состояния истории HTML в OS X Chrome 10.0.648.151

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/

• Всегда отображать текущее состояние через свойство window.history.state. Таким образом, страница сразу получает доступ к текущему состоянию страницы и не должна ждать, пока не сработает первое событие в popstate.
• Не всегда запускает событие popstate сразу после события load. Вместо этого запускайте его только во время реальных переходов истории сеанса (т. Е. Когда пользователь нажимает кнопку Назад или Вперед или когда вызывается history.back () / forward () / go ())

Неважно, какая функция, это расстраивает, когда производители ломают голову над реализацией. К счастью, вы можете достаточно легко справиться с разницей, смоделировав спецификацию и запустив собственное событие popstate при загрузке страницы.

Примерно так должно работать в FF4 с использованием jQuery. Вы будете использовать этот код после привязки ваших обработчиков событий.

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

Этот подход поддерживает спецификацию, но он объединяет управление состоянием с вашими функциями обработчика вместо процедуры инициализации; который легче поддерживать. Честно говоря, я ценю history.state, но это излишне, поскольку полезно только при загрузке страницы; в противном случае он становится другим механизмом хранения переменных.

На аналогичной ноте, сначала не вызывайте pushState(). Состояния не являются своего рода переменной и не должны использоваться как таковые. Я рекомендую устанавливать состояние только при ответе на действия пользователя - то есть после загрузки страницы / приложения.