BOM. Объект History

Из модели - BOM (Browser Object Model) - объектной модели браузера - мы можем получить данные о браузере с помощью объектов Window, Screen, History, Location и Navigator. Здесь речь пойдет об объекте History, т.е. об истории браузера, которая представлена в виде свойства  window.history или просто history. Нужно учитывать, что history является свойством только для чтения, и назначать что-либо для него вы не можете.

Объект истории в BOM позволяет взаимодействовать с историей просмотров пользователя. Он представляет историю сеанса текущего окна или вкладки, а также предоставляет методы для навигации по ней.

Основные свойства и методы объекта History

Свойства:

• • length: возвращает количество URL-адресов в списке истории.
  • scrollRestoration  - Определяет поведение после перезагрузки текущей страницы. Возможны 2 значения:
    • auto: если пользователь прокрутил страницу, то после перезагрузки она автоматически прокрутится туда, где пользователь находился ранее.
    • manual: после перезагрузки текущей страницы пользователь окажется в верхней части страницы, где бы он ни находился ранее.
  • state - состояние истории — это своего рода контекст, в котором можно хранить любые значения (которые могут быть сериализованы), которые необходимо сохранить при переходе на следующую страницу. Каждая страница имеет свое собственное состояние.
    history.state возвращает состояние для текущей страницы, на которой вы находитесь. Это значение не может быть изменено.

Методы:

• back(): загружает предыдущий URL-адрес.
• forward(): загружает следующий URL-адрес.
• go(n): загружает URL-адрес на n позиций от текущего URL-адреса (положительные значения перемещают вперед, отрицательные значения перемещают назад).
• pushState() - этот метод позволяет вам добавить запись в историю. Он принимает в качестве параметров:
  • state: состояние для новой записи
  • title: Вы можете передать строку, если хотите определить заголовок для нового состояния. Обратите внимание, что в настоящее время этот параметр не используется браузерами
  • url: этот параметр необязателен, он определяет новый URL-адрес записи, если вы хотите его изменить. Вы можете указать относительный или абсолютный путь, пока не останетесь на том же источнике. Этот новый URL-адрес не будет загружен вашим браузером.
  • Например,
    
    JavaScript

    history.pushState(null, null, 'Page 4');

    1	history.pushState(null, null, 'Page 4');

• replaceState() - этот метод позволяет заменить текущую запись в истории. Он принимает тот же параметр, что и pushState:
  • state: состояние, которое заменит текущее
  • title: вы можете передать строку, если хотите определить заголовок для нового состояния. Обратите внимание, что в настоящее время этот параметр не используется браузерами
  • url: этот параметр необязателен, он определяет новый URL-адрес записи, если вы хотите его изменить. Вы можете указать относительный или абсолютный путь, пока не останетесь на том же источнике. Этот новый URL-адрес не будет загружен вашим браузером.
  • Например:
    
    JavaScript

    history.replaceState(null, null, 'Page 4');

    1	history.replaceState(null, null, 'Page 4');

Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства length:

Однако чаще используются методы объекта History.

Например, window.history.back() эквивалентно нажатию кнопки «Назад» в браузере, а window.history.forward() эквивалентно нажатию кнопки «Вперед».

Вы также можете использовать window.history.go(-1), чтобы вернуться на одну страницу назад, и window.history.go(1), чтобы перейти на одну страницу вперед.

По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент 2, и так далее. Кроме того, метод go() можно использовать для обновления текущей страницы, передавая аргумент 0 или вызывая его без аргументов:

Кроме того, для обновления страницы можно также использовать другой объект BOM - Location и его метод reload(): window.location.reload().

Проще говоря: объект истории позволяет вам контролировать, на какие страницы пользователь может переходить в рамках текущего сеанса просмотра. Чаще всего это используется в каких-либо записях или страницах, на которые вас отправили "принудительно", например, с помощью location.href.

Обработка события popstate

Вы также можете добавить обработку события popstate. Оно вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом history.pushState() или history.replaceState(), то состояние события popstate будет содержать state копии входящего в историю объекта.

Браузеры работают с событием popstate по разному. Chrome (prior to v34) и Safari всегда вызывают popstate по окончании загрузки страницы, а Firefox не делает этого.

Обратите внимание, history.pushState() или history.replaceState() не вызывают событие popstate. Событие popstate будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперёд" или "Назад" (или при вызове history.back() или history.forward() из JavaScript).

Попробуйте перемещаться по истории браузера, чтобы посмотреть изменения.

Вывод результатов: