History.pushState не вызывает событие "popstate"

Почему

$(function () {
  $(window).bind('popstate', function () {alert('pop');});

  window.history.pushState(null, '', '/foo');
});

не сообщает pop?

Примечание. Тестирование на последнем хроме.

Согласно MDN:

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

Итак, почему мой pushState не запускает событие popstate?

Ответ 1

Параграф, на который вы ссылаетесь, немного неоднозначен. Считая example на той же странице, ясно, что popstate запускается только тогда, когда пользователь нажимает кнопку "Назад", а не когда script вызывает pushState(),

Ответ 2

Вы можете вручную запускать событие popstate на window каждый раз, когда вы вызываете history.pushState().

history.pushState(state, '', url);

var popStateEvent = new PopStateEvent('popstate', { state: state });
dispatchEvent(popStateEvent);

Ответ 3

Вы читаете страницу руководства MDN, которая не предназначена для нормативных действий.

Рассмотрим вместо MDT "страницу документации" для WindowEventHandlers.onpopstate:

Обратите внимание, что просто вызов history.pushState() или history.replaceState() не вызывает событие popstate. Событие popstate запускается только с помощью действия браузера, такого как нажатие на кнопку "Назад" (или вызов history.back() в JavaScript). Событие запускается только тогда, когда пользователь перемещается между двумя записями истории для того же документа.

Ответ 4

Мое решение:

var url = "http://awesome.website.net/route/to/paradise";
window.history.pushState({}, "", url);
window.history.pushState({}, "", url); // yes twice
window.history.back();

Это приведет к программной навигации через событие "popstate" и HTTP-запрос.

Ответ 5

Документ https://developer.mozilla.org/en-US/docs/Web/Events/popstate говорит:

Обратите внимание, что просто вызов history.pushState() или history.replaceState() не вызовет событие popstate. Событие popstate будет вызвано выполнением действия браузера, такого как щелчок по кнопке "Назад" или "Переслать" (или вызов history.back() или history.forward() в JavaScript).

Ответ 6

Я тоже столкнулся с этим... Я думаю, что событие только срабатывает, если у вас есть что-то на верхнем уровне вашего объекта данных, отличного от предыдущего состояния.

Попробуйте следующее:

var data = {rand: Math.random()};
window.history.pushState(data, '', '/foo');

Ответ 7

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

function popStateHandler(event) {
     // Event handling Code here
}
window.onpopstate = popStateHandler;

Затем вы можете просто вызвать ваш popStateHandler после нажатия pushState.