Блог

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

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

Пример:

 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 содержит копию объекта состояния записи истории.

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

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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

Вызов history.pushState() или history.replaceState() не вызовет событие popstate. Событие popstate запускается только при выполнении действия браузера, такого как нажатие кнопки «Назад» (или вызов history.back() в JavaScript), при переходе между двумя записями истории для одного и того же документа.

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