Руководство Javascript History API

window.history
Properties
Methods
history.pushState()
history.replaceState()
Событие popstate

1. window.history

Каждый Tab или Frame имеет свой объект history, и каждый объект history содержим ссылку на 1 особенный объект называется "Joint Session History". Этот особенный объект управляет всеми объектами history браузера.

Используйте синтаксис window.history (Или просто history) чтобы получить доступ в историю текущего Tab или Frame.

Как изменится списой страниц в Истории, если вы находитесь на странице в истории и перейдете на другую страницу, которая не принадлежит истории.

Заметьте: При перехождении на другую страницу, не принадлежащей истории, это значит вы не используете кнопку BACK, FORWARD и не вызываете один из методов history.back(), history.forward(), history.go(). Вы можете перейти на новую страницу, не принадлежащую истории, нажав на ссылку с отличающимся URL от текущего URL, или ввести новый URL и нажать Enter,..

Перед тем как перейти на новую страницу:

После перехождения на новую страницуi:

2. Properties

history.length

Возвращает количество объектов управляемых в истории текущего Tab (или Frame).

history.scrollRestoration

Когда вы вызываете один функций back(), forward(), go() или используете кнопку BACK, FORWARD чтобы перейти на другую страницу в истории. После того как отображается страница истории, браузер пытается восстановить (restore) местоположение прокрутки (scroll) полос прокрутки (scrollbar) для данной страницы. Способ восстановления зависит от значения history.scrollRestoration.

history.scrollRestoration имеет 2 значения это "auto" или "manual". По умолчанию "auto".

history.scrollRestoration = "auto"

Браузер выполняет обязанность восстановления местопложения полосы прокрутки для вас.

history.scrollRestoration = "manual"

Вы нужно самим выполнить восстановление местопложения полосы прокрутки. Чтобы сделать это, информация местоложение полосы прокруткки должно быть сохранено в каждом объекте Истории. Смотрите так же метод history.pushState(..).

Видео ниже покаазывает вам разницу значений "auto" и "manual":

3. Methods

Методы у history:

go([delta])
back()
forward()
pushState(data,title[,url])
replaceState(data,title[,url])

history.go([delta])

Назад (back) или вперед (forward) delta шаги в Истории. Если параметр delta = 0 или не предоставлен, браузер перезагрузит (reload) текущую страницу. Если delta находится вне позволенных значений, браузер ничего не сделает.

history.back()

Назад (back) на один шаг в Истории. Это эквивалентно вызову метода history.go(-1). Если не имеется предыдущей страницы (previous page) в Истории, браузер ничего не сделает.

history.forward()

Вперед (forward) на один шаг в Истории. Это эквивалентно вызову метода history.go(1). Если не имеется следующей страницы (next page) в Истории, браузер ничего не сделает.

pushState(data,title[,url])

Создайте объект (страницу) в истории.

replaceState(data,title[,url])

Обновите текущий объект в истории.

4. history.pushState()

Используя hash вы можете создать объекты в истории, данный способ поможет вам получить объекты в истории, при этом браузеру не нужно перезагружать страницу (reload).

Смотрите пример history с hash:

https://ex1.o7planning.com/javascript/history/hash-example.html

history.pushState(dataState, title [,url])

Метод history.pushState(..) позволяет вам создать объект в истории (Где не нужно менять URL), это полезно в одностраничном приложении (Single Page).

Когда пользователь переходит на другой объект (страницу) в истории, и данный объект был создан используя метод history.pushState(), это создаст событие popstate.

Параметры:

dataState

Объект хранит хранит состояние объекта. В этом объекте можно хранить множество вещей, например, положение прокрутки на полосах прокрутки. Это поможет вам восстановить положение полосы прокрутки вручную,...

title

Параметр title имеет значение только как подсказка, браузеры обычно не используют данный параметр для определения заголовка document.

url

Параметр url является необязательным, если предоставляется, он должен иметь одинаковое происхождение (same origin) с текущим URL страницы.

Example:

https://ex1.o7planning.com/javascript/history/pushState-example.html

pushState-example.js

function showHistory()  {
   console.log(window.history);
   var log = document.getElementById("log-area");
   log.value="";
   log.value +="history.length="+ history.length +"\n";
   log.value +="history.scrollRestoration="+history.scrollRestoration+"\n";
   log.value +="history.state="+ JSON.stringify(history.state)+"\n";
}

function popstateHandler(popstateEvent)  {
    console.log(popstateEvent );
    document.title = popstateEvent.state.title;
    showHistory();
}

// popstate event handler:
window.onpopstate = popstateHandler;

var number = 0;

function call_pushState()  {
    number = number + 1;
    var title = "State "+ number;

    var dataState = {
         empId : number,
         showProfile: true,
         title: title
    };

    window.history.pushState(dataState, title);
    document.title = title;

    // Show current History:
    showHistory();
}

pushState-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>history.pushState()</title>
      <meta charset="UTF-8">
      <meta http-equiv="pragma" content="no-cache">

      <style>textarea {width:100%;margin-top:10px;}</style>

      <script src="pushState-example.js"></script>
      
   </head>
   <body onpageshow="showHistory()">

       <h2 id="my-h2">history.pushState(..)</h2>

      <button onclick="call_pushState()">
        Call history.pushState(..)
      </button>
      <br/><br/>

      <button onclick="history.back()">history.back()</button>
      <button onclick="history.forward()">history.forward()</button>
      <br/>

      <textarea rows="8" id="log-area"></textarea>

   </body>
</html>

5. history.replaceState()

history.replaceState(dataState, title [,url])

Метод history.replaceState(..) обновляет данные статуса, заголовое и URL для текущего объекта в Истории.

Параметры:

dataState

Объект хранит состояние объекта.

title

url

6. Событие popstate

Событие popstate происходит, когда пользователь переходит на страницу (объект) в истории, созданный используя метод history.pushState(..) или history.replaceState(..).

Вы можете прислушаться к событию popstate добавив прослушиватель события (even listener) в объект window.

window.addEventListener(‘popstate’. function(popstateEvent)  {
    // Do something here!
)};

Или используйте свойство (property) window.onpopstate:

window.onpopstate = function(popstateEvent). {
    // Do something here!
};

Hướng dẫn và ví dụ Javascript PopStateEvent