Объект History в JavaScript - история просмотра страниц

Александр Мальцев
Александр Мальцев
25K
7
Содержание:
  1. Назначение объекта history
  2. Свойства, методы и события объекта history
  3. Комментарии

На этом уроке мы познакомимся с объектом 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

  • Свойство 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 в консоли браузера

Комментарии:

  1. Кайли
    Кайли
    14.06.2021, 13:08
    У вас тут явная не состыковка:
    В одном месте написано:
    «Например, history.go(2) — осуществляет перемещения пользователя на 2 шаг назад, a history.go(-2) на 2 шага вперёд.»
    А в другом
    «Также метод history.back() можно выполнить с помощью метода history.go(-1)»
    «Также метод history.forward() можно выполнить с помощью метода history.go(1)»

    И не понятно куда же перемещает значение с минусом — назад или вперед? Пойду выяснять практическим путём.
    1. Артем
      Артем
      28.07.2020, 09:47
      Уже весь Google перелопатил, как мне сделать, при клике на кнопку назад в браузере, штоб редиректило на любой сайт?
      1. Александр Мальцев
        Александр Мальцев
        28.07.2020, 15:52
        Такое поведение как вы описали выполнить нельзя. Добавление в историю элементов с помощью JavaScript и их изменение в настоящий момент необходимо выполнять в соответствии с правилом ограничения домена (Same Origin Policy). Т.е. в историю вы не можете добавить ресурс URL которого не совпадает с вашим доменом.
      2. Лева
        Лева
        12.07.2020, 14:33
        Не понимаю одно почему когда я нажимаю кнопку Назад все js коды, а именно которые приходили ajaxом исчезают?
        Остаются html + css, а js нет.

        Использовал getScript но к сожалению при нажатии назад уже загружается весь сайт, как исправить?
        Как сделать так чтобы при нажатии на кнопку назад страница высодилась моментально со всеми предыдущими ajax запросами
        1. Александр Мальцев
          Александр Мальцев
          20.07.2020, 15:40
          Потому что js код отрабатывает заново. Чтобы у вас страница загружалась с предыдущими настройками (в том же состоянии) все параметры необходимо вынести в GET и передавать их в составе URL-запроса. В этом случае у вас не будет этих проблем.
          1. Лева
            Лева
            21.07.2020, 10:18
            Вы имеете ввиду совершать ajax запрос параметром GET?
            Просто страницы у меня передаются в GET параметрами допустим index.php?id=5, а запросы на сервер POST параметрами.
            1. Александр Мальцев
              Александр Мальцев
              22.07.2020, 15:52
              Да, в этом случае при переходе у вас все настройки будут храниться в составе URL, и следовательно пользователь увидит туже страницу, которая у него была.
              Если вы используете POST, то тогда вам нужно сохранять настройки страницы в какое-нибудь другое место. Например, в cookies или local storage. А затем использовать их для восстановления вида страницы, которую пользователю она была предоставлена до этого.
        Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.