Кнопка «Назад» в браузере — это не то, чем обычно манипулируют веб-разработчики. Однако есть несколько случаев, когда вам нужно применить логику, чтобы изменить его поведение. Все это возможно с использованием истории сеансов браузера через API истории.
Во-первых, вам всегда нужно проверять совместимость браузера с функциями, предоставляемыми этим API, используя http://caniuse.com или документы MDN. Теперь давайте сначала рассмотрим некоторые основы:
Возвращение:
окно.история.назад()
Согласно документам MDN: «Это действует точно так же, как если бы пользователь нажал кнопку «Назад» на панели инструментов своего браузера».
Впереди:
window.history.forward()
Это также довольно очевидно. С помощью приведенного выше «вы можете двигаться вперед (как если бы пользователь нажал кнопку «Вперед»)»
Перейти к определенному моменту в истории:
окно.история.го(х)
x - количество страниц назад или вперед. Используйте отрицательное число, чтобы вернуться назад, и положительное число, чтобы двигаться вперед. Например, window.history.go(2) перейдет на 2 страницы вперед.
Теперь копнем глубже:
- Обновите страницу: window.history.go(0) или window.history.go()
- Получите количество страниц в стеке истории: window.history.length
- Добавьте запись в историю браузера: history.pushState(state, unused, url)
- Событие popstate окна: window.addEventListener(‘popstate’, (event) =› {})
- Объедините pushState и прослушиватель событий popstate, чтобы отключить кнопку «Назад». Это особенно полезно, если вы обрабатываете платежи или другую логику, которая требует, чтобы пользователи оставались на странице или не нажимали кнопку «Назад» в браузере.
Примеры из документов MDN:
Вот и все. Теперь вы можете полностью контролировать навигацию в браузере.
Если вам нравятся такие краткие руководства по веб-разработке, не забудьте подписаться на меня на Medium, а также в Twitter (@AkBakhshi). Кроме того, дайте мне знать, если вы хотите, чтобы я чем-нибудь помог вам, если вы переходите на технологии из нетехнического опыта.
