Управление историей браузера

DOM window объект предоставляет доступ к истории браузера через объект 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;

Добавление и изменение записей истории

В HTML5 были представлены методы history.pushState() и history.replaceState(), которые позволяют добавлять и изменять записи истории, соответственно. Эти методы работают вместе с событием 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, оставляющего тот же document и измеющего только хэш.
• Вам не нужно менять URL, если не хочется. Тогда как window.location = "#foo"; только создает новую запись истории, если текущий hash не #foo.
• Вы можете связать произвольные данные с вашим новым элементом истории. При подходе на основе хэшей необходимо кодировать все соответствующие данные в короткую строку.
• Если title в дальнейшем используется браузерами, эти данные можно удалить (независимо от хеша).

Стоит отметить, что pushState() никогда не вызывает событие hashchange, даже если новый URL отличается только хэшем.

В XUL документах, он создаёт сцефичный XUL элемент.

В других документах, он создаёт элемент с null namespace URI.

Метод replaceState()

history.replaceState() работает также, как и history.pushState(), но replaceState() заменяет последнюю запись истории вместо создания новой.

replaceState() особенно полезна, когда вы хотите обновить объект состояния или URL текущей записи истории в ответ на действия пользователя.

Событие popstate

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

Смотрите пример использования window.onpopstate.

Чтение текущего состояния

Когда страница загружается, объект состояния может быть не null.  Это может произойти в случае, если страница установила объект состояния (используя pushState() или replaceState()), а затем пользователь перезагрузил браузер.  Когда страница перезагружается, произойдёт событие onload, но не popstate.  Однако, если вы прочитаете history.state, то получите объект состояния, который получили бы в случае, если событие popstate произошло.

Вы можете прочитать объект состояния текущей записи истории, без ожидания события popstate используя свойство history.state:

var currentState = history.state;

Пример

Для полного примера AJAX сайта, смотрите: Ajax пример навигации.

Спецификации

Поддержка браузерами

Смотрите также

• window.history
• window.onpopstate