Объект History.

  History - Является интерфейсом к истории окна браузера.
  Объект History это некий стек истории окна браузера, записи в котором соответствуют последовательности документов бывших в этом окне в течение времени, указанного в настройках браузера.
  Интерфейс History позволяет перемещаться по этому стеку иммитируя стандартную навигацию по истории окна браузера, что может приводить к загрузке документов соответствующих текущей записи стека.
  В целом функционал объекта History не очень впечатляет.
  Дело в том, что, при переходах по стеку истории с помощью методов объекта History, одновременно загружаются документы соответствующие каждой записи стека, которая становится текущей.
  При этом никаких встроенных способов фильтрации записей (а следовательно и документов) в этих методах нет. Это объясняется тем, что первоначально анонсированный доступ интерфейса History к URL документов соответствующих записям стека, был исключён по соображениям безопасности.
  По этой причине такие переходы выполняются практически вслепую, что создаёт проблемы разработчику.

  Со временем функционал объекта History был дополнен методами pushState и replaceState, событием popstate, которые были призваны разрешить некоторые проблемы использования технологии AJAX с подгрузкой переменного контента.
  Одновременно методы pushState и replaceState позволили связывать записи стека истории с некоторой информацией, которая хранится на устройстве пользователя.
  То есть, по существу, эта информация привязывается к соответствующему документу, и может быть использована его скриптом при загрузке такого документа, вследствии перехода на такую запись действиями пользователя или работой скрипта, что существенно расширило функционал интерфейса History.
  Экземпляр доступен:

  1. Через свойство history объекта window
  2. В переменной с зарезервированным именем - history.
      Переменная history это и есть свойство history объекта Window текущего окна, вкладки или фрейма.
  Свойства.
  length - Содержит текущее количество записей в стеке истории окна.
  Значение имеет числовой формат.
  Значение учитывает запись о текущем ресурсе, загруженном в окне.

Формат записи в коде скрипта:

  • Экземпляр объекта History.length

Значения формата записи:

  scrollRestoration - Устанавливает настройку восстановления скроллинга документа при навигации по истории окна.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта History.scrollRestoration[= Значение]

Значения формата записи:

  state - Если текущая запись в стеке истории была получена с помощью одного их методов pushState или replaceState, то содержит значение их первого аргумента.
  Значение передается свойству state в событии PopStateEvent.

Формат записи в коде скрипта:

  • Экземпляр объекта History.state

Значения формата записи:

  Методы.
  back - Выполняет переход к предшествующей записи в стеке истории окна при её наличии.
  Возвращает значение undefined.
  Новая запись становится текущей, и в окно загружается (при необходимости) и открывается соответствующий документ.
  Если запись, к которой перешли, была помечена с помощью одного из методов pushState или replaceState, то может возникнуть событие popstate.

Формат записи в коде скрипта:

  • Экземпляр объекта History.back()

Значения формата записи:

  forward - Выполняет переход к следующей записи в стеке истории окна при её наличии.
  Возвращает значение undefined.
  Новая запись становится текущей, и в окно загружается (при необходимости) и открывается соответствующий документ.
  Если запись, к которой перешли, была помечена с помощью одного из методов pushState или replaceState, то может возникнуть событие popstate.

Формат записи в коде скрипта:

  • Экземпляр объекта History.forward()

Значения формата записи:

  go - Выполняет переход к заданной записи в стеке истории окна при её наличии.
  Возвращает значение undefined.
  Новая запись становится текущей, и в окно загружается (при необходимости) и открывается соответствующий документ.
  Если запись, к которой перешли, была помечена с помощью одного из методов pushState или replaceState, то может возникнуть событие popstate.

Формат записи в коде скрипта:

  • Экземпляр объекта History.go(Смещение)

Значения формата записи:

  Методы pushState и replaceState, которые были добавлены в объект History для разрешения некоторых проблем использования технологии AJAX с подгрузкой переменного контента, имеют довольно специфический функционал и нуждаются в особом комментарии.

  Допустим, что у вас есть несколько документов, которые являются частью Web-страницы и могут подгружаться на неё вследствие каких-либо действий пользователя.
  Допустим также, что эти документы не очень отличаются друг от друга, и различия в их контенте занимают незначительный объём от всего контента этих документов.
  Тогда, в соответствии с модной технологией с красивым названием AJAX, вы, в принципе, просто-таки обязаны не грузить каждый раз каждый такой документ, а загрузив первый из них, просто менять переменный контент как-то извлекая его из других документов, которые так и останутся на сервере, и получая этот контент (например, с помощью метода fetch) скриптом на клиентском устройстве.
  Для пользователя это будет выглядеть так, как будто каждый раз загружается новый документ.
  Но, при этом, появляется одна малюсенькая ложка дёгтя, - заголовок документа и адресная строка браузера останутся без изменения, что несомненно может ввести пользователя в заблуждение и(или) недоумение.
  Если с заголовком проблему как-то можно решить, то для устранения проблемы с адресной строкой придумали методы pushState и replaceState.

  Метод replaceState позволяет привязать к текущей записи стека истории браузера URL-адрес, который заменит, URL текущего документа в адресной строке, а также заголовок документа и любые данные (ограниченные только их объёмом), которые будут связаны с этой записью.
  В дальнейшем, запись обработанная методом replaceState сохранит заданную им связь, и, при любом переходе на эту запись (с помощью методов back, forward, go, или стрелок "вперёд" и "назад" браузера) каждый раз соответственно изменятся заголовок документа и адресная строка.
  Исходный же URL документа останется неизменным. Поэтому браузер не будет загружать его из сети, при переходах по непрерывной цепи записей стека истории с одинаковым собственным URL документа. Поэтому не и будет потерян обработчик события popstate.
  Однако, если цепь записей стека истории с одинаковым собственным URL документа прервётся (например если пользователь загрузит другой документ по ссылке из текущего), то браузер, при всех переходах по этой цепи, возобновит загрузку документов соответствующих записям в соответствии с URL адресной строки, который связан с этой записью стека истории методом replaceState, или в соответствии с собственным URL, если такой связи нет ( в этом случае собственный URL и URL адресной строки совпадут).
  Связанные данные же будут доступны каждый раз когда соответствующая запись стека истории станет текущей, вне зависимости от того был ли вновь загружен соответствующий документ или нет. На эти данные будет ссылаться свойство state объекта History и(или) state объекта PopStateEvent.
  Эти данные можно получить, обработав событие load или popstate.

  Цепь записей стека истории модификаций одного и того же документа будет также прервана если пользователь, в момент нахождения текущего документа на Web-странице, её обновит.
  В этом случае браузер, при перемещении по этой цепи в стеке истории, будет загружать документы с адреса, который соответствует адресной строке.
  То же самое произойдёт, если, сразу после вызова метода replaceState, вызвать метод go(0).

  Надо ещё отметить, что при сохранении ссылки на текущий документ (например, в папке "избранное" или на "экспресс-панели"), будет сохранена ссылка соответствующая адресной строке.

  Метод pushState делает всё тоже самое, что и метод replaceState, только не с текущей записью стека истории, а с, предварительно созданной на основе текущей, новой записью, которую метод pushState поместит на вершину стека и сделает текущей.

  Отдельного описания требует событие popstate. Это событие возникает не тогда, когда текущей записью стека истории браузера становится запись помеченная методами pushState или replaceState, а когда происходит перемещение в непрерывной цепи записей, которые соответствуют документу с одним и тем же собственным URL.
  То есть если, и текущая запись, и запись с которой на неё переместились (с помощью методов back, forward, go, или стрелок "вперёд" "назад" браузера), соответствуют одному и тому же документу невзирая на URL возможно установленными методами pushState или replaceState.
  Кроме того цепь записей с одинаковым собственным URL, внутри такого перехода, в стеке истории не должна быть прервана. (Это понятно потому, что не для фреймовой структуры, при переходе с документа на другой документ, обработчик события popstate потеряется, а, с использованием фреймов, смысл подгрузки части контента в документ просто исчезает.).

  Надо иметь в виду, что в цепи записей в стеке истории, соответствующих документу с одним и тем же собственным URL, могут иметься и записи не полученные методами pushState или replaceState (например самая первая запись).
  Если, при переходе по цепи, такая запись станет текущей, то событие popstate всё равно произойдёт, но свойство state объекта PopStateEvent будет содержать значение null.

  Вообще-то говоря применение технологии AJAX на основе подгрузки переменной части контента и с использованием методов pushState, replaceState и механизма popstate не самое приятное занятие для разработчика, особенно в крупном проекте.
  Всё же и pushState, и replaceState, и механизм popstate больше похожи на некие "костыли", "ходить" на которых можно, но не удобно, да и увеличивается вероятность падения.
  Гораздно более интересней и проще выглядит использование фреймов.
  В этом случае на сервере не хранятся частично одинаковые документы с частично разным контентом. А есть "родительский" документ и документы, подгружаемые во фреймы, и эти "дочерние" документы не имеют общего контента с "родительским".
  То есть на Web-страницу подгружается не часть контента документа, а просто целый документ, который содержит только дополняющий контент.
  Логично, наглядно и просто, но есть вопросы, которые подталкивают разработчика к первому варианту:
  1. Подгрузку части контента можно выполнять по соединению, которое может быть создано не только по протоколу http(https). Такая подгрузка, к примеру, не требует особого контроля протокола. Следствие - такая подгрузка может работать быстрее и меньше загружать сеть. Кроме того - "какой разработчик не испытывает особой любви к особым протоколам".
  2. Документы, помещаемые во фрейм, будучи проиндексированными поисковыми системами, и загруженными по ссылке из поисковых систем в окно браузера, выглядят там "сиротливо" без своего "родителя", и не дают (если это не предусмотрел разработчик) пользователю ничего знать о присущем им окружении. Поэтому производители поисковых систем сильно не любят фреймы (один из таких производителей и предложил методы pushState и replaceState).

  Впрочем, методы pushState и replaceState можно применять просто для привязки к записям стека истории (по существу, к любому документу бывшему в окне браузера) информации хранимой на клиентском устройстве.
  Эту информацию можно, например, использовать при очередном переходе на такую запись для позиционирования соответствующего документа в окне или фрейме.
  pushState - Добавляет новую запись наверх стека истории окна и связывает её с заданными данными.
  Возвращает значение undefined.
  Новая запись полностью копирует текущую запись и становится текущей.
  Поэтому документ в окне не обновляется.
  Вызов метода pushState не приводит к возникновению события popstate.

Формат записи в коде скрипта:

  • Экземпляр объекта History.pushState(Данные, Заголовок, Адрес)

Значения формата записи:

  • Экземпляр объекта History - Любой операнд значения со значением экземпляра объекта History.
  • . - Оператор доступа к методу объекта.
  • pushState - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Данные - Значение, с которым будет связана новая запись, заданное в любом формате экземпляра объекта.
      Значение сериализуется браузером в формат JSON.
      Надо иметь в виду, что браузеры ограничивают (по разному) объем этого значения.
      Это значение доступно в собственном свойстве state, это значение также будет доступно, если эта запись вновь станет текущей при переходе на неё (с помощью методов back, forward, go, или стрелок "вперёд" или "назад" браузера).
  • Заголовок - Текст заголовка, с которым будет связана новая запись, заданный в любом строковом формате.
      Этот заголовок заменит текст заголовка указанный в документе, связанном с этой записью.
      Кроме того, если впоследствии, при перемещениях (с помощью методов back, forward, go, или стрелок "вперёд" или "назад" браузера) по стеку истории, эта запись вновь станет текущей, то этот заголовок может быть заменить заголовок документа.
      Браузеры плохо поддерживают этот аргумент, однако его наличие всё равно обязательно.
  • Адрес - URL-адрес в пределах текущего домена, с которым будет связана новая запись, заданный в любом строковом формате.
      Этот адрес заменит текст адресной строки браузера, но документ с этим адресом загружен не будет, а в окне останется текущий документ.
      Однако, если, сразу после вызова метода pushState, вызвать метод go(0), то это приведёт к загрузке документа с этим URL без добавления соответствующей записи в стек истории.
      Если впоследствии, при перемещениях (с помощью методов back, forward, go, или стрелок "вперёд" или "назад" браузера) по стеку истории, запись обработанная методом replaceState вновь станет текущей, то этот адрес может быть помещён браузером в адресную строку.
      Этот адрес можно задавать относительно текущего URL.
      Этот адрес может быть и текущим URL.
      Из соображений безопасности в адресе нельзя менять порт, схему (http://) и домен текущего URL-адреса.
      Однако можно изменять фрагменты текущего URL-адреса, которые следуют за символами /, ?, # (задаются в адресе вместе с этими символами).
      Поскольку адрес задаётся относительно текущего URL, то текущий URL в нём можно не указывать.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  replaceState- Связывает текущую запись в стеке истории окна с заданными данными.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта History.replaceState(Данные, Заголовок[, Адрес])

Значения формата записи:

  • Экземпляр объекта History - Любой операнд значения со значением экземпляра объекта History.
  • . - Оператор доступа к методу объекта.
  • replaceState - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Данные - Значение, с которым будет связана текущая запись, заданное в любом формате экземпляра объекта.
      Значение сериализуется браузером в формат JSON.
      Надо иметь в виду, что браузеры ограничивают (по разному) объем этого значения.
      Это значение доступно в собственном свойстве state, это значение также будет доступно, если эта запись вновь станет текущей при переходе на неё (с помощью методов back, forward, go, или стрелок "вперёд" "назад" браузера).
  • Заголовок - Текст заголовка, с которым будет связана текущая запись, заданный в любом строковом формате.
      Этот заголовок заменит текст заголовка указанный в документе, связанном с этой записью.
      Кроме того, если впоследствии, при перемещениях (с помощью методов back, forward, go, или стрелок "вперёд" или "назад" браузера) по стеку истории, эта запись вновь станет текущей, то этот заголовок может быть заменить заголовок документа.
      Браузеры плохо поддерживают этот аргумент, однако его наличие всё равно обязательно.
  • Адрес - URL-адрес в пределах текущего домена, с которым будет связана текущая запись, заданный в любом строковом формате.
      Этот адрес заменит текст адресной строки браузера, но документ с этим адресом загружен не будет, а в окне останется текущий документ.
      Однако, если, сразу после вызова метода replaceState, вызвать метод go(0), то это приведёт к загрузке документа с этим URL. Однако стек истории не пополнится новой записью.
      Если впоследствии, при перемещениях (с помощью методов back, forward, go, или стрелок "вперёд" или "назад" браузера) по стеку истории, запись обработанная методом replaceState вновь станет текущей, то этот адрес может быть помещён браузером в адресную строку.
      Этот адрес можно задавать относительно текущего URL.
      Этот адрес может быть и текущим URL.
      Из соображений безопасности в адресе нельзя менять порт, схему (http://) и домен текущего URL-адреса.
      Однако можно изменять фрагменты текущего URL-адреса, которые следуют за символами /, ?, # (задаются в адресе вместе с этими символами).
      Поскольку адрес задаётся относительно текущего URL, то текущий URL в нём можно не указывать.
      Если адрес не задан, то, по умолчанию, его значение равно значению текущего URL.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.