Объект History в JavaScript - история просмотра страниц
На этом уроке мы познакомимся с объектом history
, который отвечает за кнопки "Назад" и "Вперёд", расположенные в окне браузера.
Назначение объекта history
Объект history
отвечает за историю переходов, которые пользователь совершил в переделах одного окна или вкладки браузера. Эти переходы браузер сохраняет в сессию истории текущего окна (вкладки) и пользователь с помощи кнопки "Назад" всегда может вернуться на предыдущие страницы. Кроме кнопки "Назад" пользователю доступна ещё кнопка "Вперёд", которая предназначена для того, чтобы пользователь мог вернуться обратно на страницы, с которых он ушел с помощью кнопки "Назад". Таким образом, объект history
отвечает за 2 эти кнопки, и позволять не только имитировать их нажатие, но добавлять и изменять записи в истории, перехватывать события при нажатии на эти кнопки и др.
Например: В некотором окне (вкладке) браузера пользователь изначально открыл страницу 1. Просмотрев эту страницу, пользователь нажал в ней на некоторую ссылку и перешёл на страницу 2. На второй странице пользователь снова нажал на ссылку и перешёл на страницу 3. В результате сессия истории для этого окна (вкладки) будет состоять из 3 элементов.

На текущий момент для пользователя доступна кнопка "Назад". При нажатии на эту кнопку пользователь может вернуться на страницу 2.

В этот момент времени для пользователя становится доступны кнопки "Назад" и "Вперёд". При нажатии на кнопку "Назад" пользователь может вернуться на страницу 1, а при нажатии на кнопку "Вперёд" - на страницу 3. Таким образом, пользователь с помощью кнопок "Назад" и "Вперёд" может перемещаться по истории внутри этого окна (вкладки).
Каждый элемент в сессии состоит из:
- data - это некоторые данные, которые можно связать с определённым элементом истории. В основном они используются для того чтобы восстановить состояние динамической страницы при переходе к ней с помощью кнопки "Назад" или "Вперёд". Т.е. сначала Вы сохраняете состояние страницы, а точнее динамических её блоков, которые загружаются с помощью технологии AJAX, в
data
. А потом, когда пользователь переходит к ней с помощью кнопки "Назад" или "Вперёд", Вы можете восстановить состояние этой страницы, а точнее этих динамических блоков (т.к. одного URL не достаточно) с помощью информации, сохранённой вdata
. - title - название пункта истории. В настоящее время большинство браузеров не поддерживают возможность установления названия пункта с помощью JavaScript. Браузеры в качестве названия пункта истории используют название страницы, т.е. текст, расположенный между открывающим
<titie>
и закрывающим</title>
тегами HTML страницы. - url - URL адрес страницы.
Свойства, методы и события объекта history
- Свойство history.length - возвращает количество элементов в сессии истории текущего окна (вкладки). Другими словами, данное свойство возвращает количество переходов, которые Вы можете выполнить в пределах текущего окна как вперед, так и назад. Данное свойство доступно только для чтения.
- Свойство history.state - позволяет получить данные (
data
) текущего элемента истории. Эти данные можно добавить к элементу истории с помощью методовhistory.pushState()
иhistory.replaceState()
. - Метод history.go(). Он позволяет переместить пользователя на некоторое количество страниц вперёд или назад по истории. Метод
history.go()
имеет один обязательный параметр - это число, на которое надо переместить пользователя вверх или вниз по истории. Например,history.go(2)
- осуществляет перемещения пользователя на 2 шаг назад, ahistory.go(-2)
на 2 шага вперёд. Если в качестве параметра указать значение 0, то данный метод вызовет перезагрузку страницы. Если указать в качестве значение число, которое превышает количество шагов, которые может совершить пользователь в текущем окне, то ни чего не произойдёт. - Метод history.back() - осуществляет перемещение пользователя на одну страницу назад по истории, т.е. он программно 'имитирует" нажатие кнопки "Назад" в браузере. Также метод
history.back()
можно выполнить с помощью методаhistory.go(-1)
. - Метод history.forward() - осуществляет перемещение пользователя на одну страницу вперёд по истории, т.е. он программно "имитирует" нажатие кнопки "Вперёд" в браузере. Также метод
history.forward()
можно выполнить с помощью методаhistory.go(1)
. - Метод history.pushState() - позволяет добавить новую запись в сессию истории текущего окна (вкладки). Добавление записи (элемента) осуществляется в конец сессии истории.
JavaScript
history.pushState(data,title[,url]);
Данный метод принимает 3 параметра:
data
(обязательный параметр) - некоторые данные, которые будут связаны с этой записью в сессии истории. Если в данных нет необходимости, то используйте в качестве параметра значениеnull
.title
(обязательный параметр) - название записи в сессии истории.url
(необязательный параметр) - это URL записи в сессии истории. Если URL не указать, то будет использоваться текущий адрес страницы.
- Метод history.replaceState() - позволяет изменить текущий элемент истории.
JavaScript
Данный метод принимает 3 параметра. Назначение параметров этого метода аналогично методуhistory.replaceState(data,title[,url]).
history.pushState()
. - Событие popstate. Данное событие вызывает браузер при навигации по истории. Т.е. с помощью его Вы можете обрабатывать события, происходящие в браузере, когда пользователь нажимает на кнопку "Назад" или "Вперёд", или при выполнении методов
history.go()
,history.back()
,history.forward()
.JavaScriptonpopstate = function(event) { //код обработки события popstate //например: console.log(event.state); }
JavaScriptwindow.addEventListener ("popstate", function (e) { //код обработки события popstate });
В качестве примера рассмотрим работу с объектом history
в консоли браузера:
- Откроем вкладку в браузере и введём в адресной строке
http://www.yandex.ru/
и нажмём Enter. - В этой же вкладке в адресной строке введём
http://getbootstrap.com/
и нажмём опять Enter. Если посмотреть на кнопку "Назад", то он стала активной и позволяет перейти на один шаг назад, т.е. на страницуhttps://www.yandex.ru/
. Кроме этого можно увидеть список элементов истории, если нажать правой кнопкой мыши на кнопку "Назад". - Откроем консоль (клавиша F12 в браузере, вкладка "Консоль") и поработаем с историей с помощью JavaScript:
- Узнаем количество элементов в истории:
history.length
; - Добавим новый элемент в историю:
history.pushState(null,null,"http://getbootstrap.com/css/");
- Перезагрузим страницу с помощью объекта
history
:history.go(0);
- Для примера заменим текущий элемент истории и свяжем с ним строку "Привет":
- Получим данные связанные с этим элементом истории:
history.state;
- Перейдём на 2 шага назад по истории, т.е. на страницу
http://www.yandex.ru/
:history.go(-2);
history.replaceState("Привет",null,"http://getbootstrap.com/javascript/");

В одном месте написано:
«Например, history.go(2) — осуществляет перемещения пользователя на 2 шаг назад, a history.go(-2) на 2 шага вперёд.»
А в другом
«Также метод history.back() можно выполнить с помощью метода history.go(-1)»
«Также метод history.forward() можно выполнить с помощью метода history.go(1)»
И не понятно куда же перемещает значение с минусом — назад или вперед? Пойду выяснять практическим путём.
Остаются html + css, а js нет.
Использовал getScript но к сожалению при нажатии назад уже загружается весь сайт, как исправить?
Как сделать так чтобы при нажатии на кнопку назад страница высодилась моментально со всеми предыдущими ajax запросами
Просто страницы у меня передаются в GET параметрами допустим index.php?id=5, а запросы на сервер POST параметрами.
Если вы используете POST, то тогда вам нужно сохранять настройки страницы в какое-нибудь другое место. Например, в cookies или local storage. А затем использовать их для восстановления вида страницы, которую пользователю она была предоставлена до этого.