Как определить, когда URL браузера меняется
Сегодня давайте посмотрим, как определить, когда URL-адрес изменяется и что-то сделать в результате.
Событие popstate
Если вы используете для обновления URL-адреса history.pushState(), когда пользователь нажимает кнопки «вперед» или «назад», URL-адрес изменится, а пользовательский интерфейс - нет.
Вы можете использовать событие popstate, чтобы обнаружить эти изменения URL и вносить изменения в пользовательский интерфейс по мере необходимости.
window.addEventListener('popstate', function (event) {
// The URL changed...
});Вчера мы узнали, что первое свойство, переданное методу history.pushState(), - это state. Вы можете получить доступ к этому свойству в объекте event.
window.addEventListener('popstate', function (event) {
// Log the state data to the console
console.log(event.state);
});
Двигаясь вперед и назад по истории
Вы также можете перемещаться вперед и назад по истории браузера с помощью нескольких других методов в History API.
Метод history.back() перемещается на одну страницу назад, а метод history.forward() идет вперед на одну страницу.
Вы можете перейти вперед или назад более чем на одну страницу, используя метод history.go(). Передайте количество страниц для прыжка. Используйте положительное число, чтобы идти вперед, и отрицательное число, чтобы идти назад.
// go back 2 pages
history.go(-2);
// Go forward 3 pages
history.go(3);
Поддержка браузеров
Событие popstate, методы back(), forward() и go() все работают во всех современных браузерах, и в IE 10+.
