JavaScript - Объект history

На этом уроке мы познакомимся с объектом history, который отвечает за кнопки "Назад" и "Вперёд", расположенные в окне браузера.

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

Например: В некотором окне (вкладке) браузера пользователь изначально открыл страницу 1. Просмотрев эту страницу, пользователь нажал в ней на некоторую ссылку и перешёл на страницу 2. На второй странице пользователь снова нажал на ссылку и перешёл на страницу 3. В результате сессия истории для этого окна (вкладки) будет состоять из 3 элементов.

JavaScript - история переходов в пределах одного окна (вкладки)

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

JavaScript - история переходов в пределах одного окна (вкладки)

В этот момент времени для пользователя становится доступны кнопки "Назад" и "Вперёд". При нажатии на кнопку "Назад" пользователь может вернуться на страницу 1, а при нажатии на кнопку "Вперёд" - на страницу 3. Таким образом, пользователь с помощью кнопок "Назад" и "Вперёд" может перемещаться по истории внутри этого окна (вкладки).

Каждый элемент в сессии состоит из:

  • data - это некоторые данные, которые можно связать с определённым элементом истории. В основном они используются для того чтобы восстановить состояние динамической страницы при переходе к ней с помощью кнопки "Назад" или "Вперёд". Т.е. сначала Вы сохраняете состояние страницы, а точнее динамических её блоков, которые загружаются с помощью технологии AJAX, в data. А потом, когда пользователь переходит к ней с помощью кнопки "Назад" или "Вперёд", Вы можете восстановить состояние этой страницы, а точнее этих динамических блоков (т.к. одного URL не достаточно) с помощью информации, сохранённой в data.
  • title - название пункта истории. В настоящее время большинство браузеров не поддерживают возможность установления названия пункта с помощью JavaScript. Браузеры в качестве названия пункта истории используют название страницы, т.е. текст, расположенный между открывающим <titie> и закрывающим </title> тегами HTML страницы.
  • url - URL адрес страницы.
  • Свойство history.length - возвращает количество элементов в сессии истории текущего окна (вкладки). Другими словами, данное свойство возвращает количество переходов, которые Вы можете выполнить в пределах текущего окна как вперед, так и назад. Данное свойство доступно только для чтения.
  • Свойство history.state - позволяет получить данные (data) текущего элемента истории. Эти данные можно добавить к элементу истории с помощью методов history.pushState() и history.replaceState().
  • Метод history.go(). Он позволяет переместить пользователя на некоторое количество страниц вперёд или назад по истории. Метод history.go() имеет один обязательный параметр - это число, на которое надо переместить пользователя вверх или вниз по истории. Например, history.go(2) - осуществляет перемещения пользователя на 2 шаг назад, a history.go(-2) на 2 шага вперёд. Если в качестве параметра указать значение 0, то данный метод вызовет перезагрузку страницы. Если указать в качестве значение число, которое превышает количество шагов, которые может совершить пользователь в текущем окне, то ни чего не произойдёт.
  • Метод history.back() - осуществляет перемещение пользователя на одну страницу назад по истории, т.е. он программно 'имитирует" нажатие кнопки "Назад" в браузере. Также метод history.back() можно выполнить с помощью метода history.go(-1).
  • Метод history.forward() - осуществляет перемещение пользователя на одну страницу вперёд по истории, т.е. он программно "имитирует" нажатие кнопки "Вперёд" в браузере. Также метод history.forward() можно выполнить с помощью метода history.go(1).
  • Метод history.pushState() - позволяет добавить новую запись в сессию истории текущего окна (вкладки). Добавление записи (элемента) осуществляется в конец сессии истории.

    JavaScript - метод history.pushstate()

    history.pushState(data,title[,url]);

    Данный метод принимает 3 параметра:

    • data (обязательный параметр) - некоторые данные, которые будут связаны с этой записью в сессии истории. Если в данных нет необходимости, то используйте в качестве параметра значение null.
    • title (обязательный параметр) - название записи в сессии истории.
    • url (необязательный параметр) - это URL записи в сессии истории. Если URL не указать, то будет использоваться текущий адрес страницы.
  • Метод history.replaceState() - позволяет изменить текущий элемент истории.

    JavaScript - метод history.replacestate()

    history.replaceState(data,title[,url]).
    Данный метод принимает 3 параметра. Назначение параметров этого метода аналогично методу history.pushState().
  • Событие popstate. Данное событие вызывает браузер при навигации по истории. Т.е. с помощью его Вы можете обрабатывать события, происходящие в браузере, когда пользователь нажимает на кнопку "Назад" или "Вперёд", или при выполнении методов history.go(), history.back(), history.forward().
    onpopstate = function(event) {
      //код обработки события popstate
      //например:
      console.log(event.state);
    }
    
    window.addEventListener ("popstate", function (e) {
    //код обработки события popstate
    });
    

В качестве примера рассмотрим работу с объектом history в консоли браузера:

  1. Откроем вкладку в браузере и введём в адресной строке http://www.yandex.ru/ и нажмём Enter.
  2. В этой же вкладке в адресной строке введём http://getbootstrap.com/ и нажмём опять Enter. Если посмотреть на кнопку "Назад", то он стала активной и позволяет перейти на один шаг назад, т.е. на страницу http://www.yandex.ru/. Кроме этого можно увидеть список элементов истории, если нажать правой кнопкой мыши на кнопку "Назад".
  3. Откроем консоль (клавиша F12 в браузере, вкладка "Консоль") и поработаем с историей с помощью JavaScript:
    • Узнаем количество элементов в истории: history.length;
    • Добавим новый элемент в историю: history.pushState(null,null,"http://getbootstrap.com/css/");
    • Перезагрузим страницу с помощью объекта history: history.go(0);
    • Для примера заменим текущий элемент истории и свяжем с ним строку "Привет":
    • history.replaceState("Привет",null,"http://getbootstrap.com/javascript/");
    • Получим данные связанные с этим элементом истории: history.state;
    • Перейдём на 2 шага назад по истории, т.е. на страницу http://www.yandex.ru/: history.go(-2);

JavaScript - работа с объектом history в консоли браузера



   JavaScript и jQuery 0    3718 0

Комментарии (2)

  1. Вячеслав # 0
    window.addEventUstener («popstate», function (e) {
    //код обработки события popstate
    });
    -window.addEventUstener??
    1. Александр Мальцев # 0
      Извините за опечатку, исправил.

    Вы должны авторизоваться, чтобы оставлять комментарии.