DOM {{ domxref("window") }} объект предоставляет доступ к истории браузера через объект {{ domxref("window.history", "history") }}. Он расширяет полезные свойства и методы, которые позволяют двигаться вперед и назад по истории пользователя, а также - начиная с HTML5 - манипулировать содержимым стека истории.
Путешествование по истории
Перемещайтесь вперед и назад по истории, используя методы back()
, forward() и
go()
.
Передвижение вперёд и назад
Чтоб переместиться назад, сделайте:
window.history.back();
Это будет действовать так же, как если бы пользователь нажал на кнопку Назад на панели инструментов браузера.
Похожим образом, вы можете перемещаться вперед (как если бы пользователь нажал на кнопку Вперед), так:
window.history.forward();
Перемещение на определенный момент в истории
Вы можете использовать метод go()
, чтобы загрузить конкретную страницу из истории сессии, определённую относительной позицией для текущей страницы (относительный показатель начинается с 0).
Переместиться на страницу назад (эквивалент back()
):
window.history.go(-1);
Вперед на страницу(или вызвав forward())
:
window.history.go(1);
Кроме того, вы можете двигаться вперед на 2 страницы, передавая 2, и так далее.
Вы можете определить количество страниц в стеке истории, посмотрев свойство length:
var numberOfEntries = window.history.length;
go()
; это не стандартизировано и не поддерживается в Gecko.Добавление и изменение записей истории
{{ gecko_minversion_header("2") }}
HTML5 представил history.pushState()
и history.replaceState()
методы, которые позволяют добавлять и изменять записи истории, соответственно. Эти методы работают вместе вместе с событием {{ domxref("window.onpopstate") }}.
Используя history.pushState()
можно изменить referrer, который будет использоваться в HTTP заголовке referrer для XMLHttpRequest
объектов. Referrer будет URL документа, в окне которого создали объект XMLHttpRequest
.
Пример
Представьте https://mozilla.org/foo.html, которая выполняет следующий JavaScript:
var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");
В этом случае адресная строка станет показывать https://mozilla.org/bar.html, но браузер не будет загружать страницу bar.html
и даже проверять существует ли она.
Предположим, затем пользователь перешел на https://google.com, а затем кликнул назад. В этом случае URL отобразится как https://mozilla.org/bar.html, а странице произойдет событие popstate, тогда объект
состояния будет содержать копию stateObj
. Сама страница будет выглядеть как foo.html
, хотя страница могла изменить своё содержание из-за события popstate
.
Если мы опять нажмём назад, URL изменится на https://mozilla.org/foo.html, а в документе снова произойдёт событие popstate, в этот раз
объект состояния будет пуст. Как видим, возвращаясь мы не изменяем содержимое документа, хотя документ может обновить содержимое сам после получения события popstate.
Метод pushState()
pushState()
принимает три параметра: объект состояния, заголовок (сейчас игнорируется) и необязательный URL. Давайте рассмотрим каждый из этих трех параметров более детально:
-
объект состояния — JavaScript объект, ассоцированной с новой записью истории, созданной
pushState()
. Всякий раз, когда пользователь переходит к новому состоянию, происходит popstate событие, и свойство state события копию объекта записи истории.Объект состояния может всем, что может сериаризироваться. Так как Firefox сохраняет его на диск пользователя, он может быть восстановлен, после того, как юзер перезапустит браузер. Мы наложили ограничение на этот объект в 640КБ. Если вы передадите больший объект в
pushState()
, метод бросит исключение. Если вам нужно больше места используйтеsessionStorage
и/илиlocalStorage
. -
заголовок — Firefox в данный момент игнорирует этот параметр, хотя может начать использовать его в будущем. Передача пустой строки будет безопасна для следующих реализаций метода. Хотя можете добавить заголовок, для состояния к которому вы направляетесь.
-
URL — URL новой записи истории. Заметьте, что браузер не пытается загрузить этот URL после вызова
pushState()
, хотя может попытаться позже, например, когда пользователь перезапустит браузер. URL не обязательно быть аблосютным, он может относительным относительно текущей страницы. Новый URL должен идти на тот же домен, протокол и порт; иначе,pushState()
будет ругаться. Параметр не обязателен, если он не указан будет использоваться URL текущего документа.
В определенном смысле, вызов pushState()
похож на установку window.location = "#foo"
, в обоих случаях будет создаваться и активироваться другая запись истории, связанная с текущим документом. Но у pushState()
несколько преимуществ:
- Новый URL может любым в пределах домена, порта и протокола. В отличие от установки
window.location,
оставляющего тот же {{ domxref("document") }} и измеющего только хэш. - Вам не нужно менять URL, если не хочется. Тогда как
window.location = "#foo";
только создает новую запись истории без hash изменяется. - Вы можете связать произвольные данные с вашим новым элементом истории. При подходе на основе хэш необходимо кодировать все соответствующие данные в короткую строку.
Ешё pushState()
никогда не вызывает событие hashchange, даже если новый URL отличается только хэшем.
Метод replaceState()
history.replaceState()
работает также, как и history.pushState(), но
replaceState()
заменяет последнюю запись истории вместо создания новой.
replaceState()
особенно полезна, когда вы хотите обновить объект состояния или URL текущей записи истории в ответ на действия пользователя.
Событие popstate
Popstate событие вызывается каждый раз, когда история изменятся. Если запись истории был создана с помощью вызова pushState
или replaceState
, свойство state
события popstate
содержит копию записи истории.
Смотрите пример использования {{ domxref("window.onpopstate") }}.
Чтение текущего состояния
Когда страница загружается, объект состояния пуст. Но пуст не будет, например, страница установила объект состояния (используя pushState()
или replaceState()
), а потом пользователь перезагрузил браузер. Когда страница перезагружается, произойдёт событие onload, но не popstate. Однако, если вы прочитаете history.state, то получите назад объект состояния, который у вас был, когда пробило событие popstate.
Вы можете прочитать объект состояния текущей истории, без ожидания события popstate
используя свойство history.state
, типа такого:
var currentState = history.state;
Пример
Для полного примера AJAX сайта, смотрите: Ajax пример навигации.
Поддержка браузрами
{{ CompatibilityTable() }}
Функциональность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
replaceState, pushState | 5 | {{ CompatGeckoDesktop("2.0") }} | 10 | 11.50 | 5.0 |
history.state | 18 | {{ CompatGeckoDesktop("2.0") }} | 10 | 11.50 | 6.0 |
Функциональность | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
replaceState, pushState | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
history.state | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
Смотрите также
- {{ domxref("window.history") }}
- {{ domxref("window.onpopstate") }}
{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}