Когда срабатывает popstate?

Question

Я поместил весь свой код в $ (document). Уже в соответствии с нормой, но должен ли я также поместить мой слушатель 'popstate' в самый конец этого кода?Или это имеет значение?

Answer 1

Это на самом деле не имеет значения, и поскольку это событие, его можно выполнить даже до вашего ready метода. Единственное, что нужно поместить в document ready, это код, взаимодействующий с DOM. Все остальное (и, возможно, не следует) помещать в готовый документ.

Пример:

window.onpopstate = function() {
    // binding this event can be done anywhere, 
    // but shouldn't be inside document ready
};

$(document).ready(function() {
    // DOM manipulation and other stuff
});

Теперь, когда popstate фактически запущен, это сильно отличается от того, когда он связан. Согласно документу Mozilla:

Событие popstate отправляется окну каждый раз, когда изменяется активная запись истории. Если активируемая запись истории была создана вызовом history.pushState () или была затронута вызовом history.replaceState (), свойство состояния события popstate содержит копию объекта состояния записи истории.

Answer 2

Я был сбит с толку, потому что popstate срабатывал при каждой загрузке страницы (я использую chrome).

С https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate:

Браузеры обычно по-разному обрабатывают событие popstate на страниценагрузки.Chrome и Safari всегда генерируют событие popstate при загрузке страницы, а Firefox - нет.

Таким образом, в chrome (и, очевидно, safari) будет выполняться метод готовности jquery, за которым следует событие popstate.то есть не имеет значения, если вы прикрепите событие в ready (или body.onload в этом отношении), событие popstate произойдет после того, как ваш метод ready будет завершен.

В firefox (16.0.1) popstateсобытие не запускается при загрузке страницы (я не могу проверить IE 10).

Answer 3

Просто добавьте ключ к состоянию каждый раз, когда вы нажимаете на историю или заменяете состояние, и проверяете его в событии popstate, если вы вообще не используете состояние, вы можете просто нажать {} как состояние и выйти состояние pop в случае, если event.state имеет значение null.