Как я могу игнорировать window.onpopstate при загрузке страницы?

Я играю с window.onpopstate, и есть кое-что, что меня немного раздражает:

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

источник

Я тестировал его, и да, в Chrome и Safari 5.1+ событие popstate запускается при загрузке страницы, но не в Firefox или IE10.

Проблема заключается в том, что я хочу слушать только события popstate, где пользователь нажал кнопку "Назад" или "Переслать" (или история была изменена с помощью javascript), но не хочет ничего делать в pageload.

Другими словами, я хочу различать событие popstate от загрузки страницы из других событий popstate.

Это то, что я пробовал до сих пор (я использую jQuery):

$(function() {
  console.log('document ready');

  setTimeout(function() {
    window.onpopstate = function(event) {
      // Do something here
    }, 10);
});

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

Кажется, что это работает, но мне не нравится это решение. Я имею в виду, как я могу быть уверенным, что таймаут, выбранный для setTimeout, достаточно велик, но не слишком большой (потому что я не хочу, чтобы он слишком долго ждал).

Я надеюсь, что есть более разумное решение!

Ответы

Ответ 1

Проверить логическую истину event.state в popstate обработчике событий:

window.addEventListener('popstate', function(event) {
    if (event.state) {
        alert('!');
    }
}, false);

Чтобы это сработало, всегда укажите аргумент состояния < null при вызове history.pushState() или history.replaceState(). Кроме того, рассмотрите возможность использования библиотеки обертки, например History.js, которая обеспечивает согласованное поведение в браузерах.

Ответ 2

У меня была аналогичная проблема, и я должен был проверить, чтобы убедиться, что страница полностью загружена.

Я использовал что-то вроде этого:

var page_loaded = false;    
window.onpopstate = function(event){
    if(!page_loaded){
       page_loaded = true;
       return false;
     }
    //Continue With Your Code
}

Ответ 3

Чтобы реагировать на событие popstate, вам нужно нажать какое-то состояние на историю сеансов.

Например, добавьте эту строку в раздел готовности документа:

history.pushState(null, null, window.location.pathname);

Не идеально, но он работает и в Chrome, Firefox и других браузерах.

Затем событие запускается правильно, когда пользователь нажимает кнопку "Назад" или "Вперед", также когда методы history.back(), history.forward(), history.go() вызываются вручную. Каждый раз, когда вызывается popstate, вам нужно снова нажать другое состояние, чтобы заставить его работать.

См. также:

Ответ 4

Похоже, что ни один из браузеров больше не генерирует событие при загрузке страницы на сегодняшний день:

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

Источник: https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent