DevGang
Авторизоваться

Как определить, когда 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+.

Источник:

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу