HTML5 History API: синтаксис

С появлением HTML5 history API все изменилось — теперь мы можем гулять по истории (раньше тоже могли), добавлять записи в историю, реагировать на переходы по истории, изменять записи. В данной статье мы обсудим history API и рассмотрим примеры использования.

 

 

 

 

history.length

Свойство lenght показывает, сколько записей в журнале сессии. Если вы посетили 7 страниц, а затем попали на страницу, которая выводит значение history.lenght, то вы увидите 8 (7 + текущая страница, которая является частью сессии).

Увидеть свойство length можно в приведенном ниже плохом коде:

<a href="#" 
    onclick="this.innerHTML = '# of items in your history: ' + history.length; return false">
    Click to View history.length
</a>

Результатом будет значение, равное количеству записей в сессии. Если вы погуляете по сайту и затем вернетесь снова на ту же страницу, где приведен данный код, то вы увидите уже другое значение, т.к. записей в сессии станет больше.

Не используйте обработчик onclick прямо в коде. Это дурной тон. Данный пример приведен только для демонстрации использования history.length.

 

history.go()

Этот метод существовал до появления HTML5. Метод go принимает в качестве параметра целое значение, которое говорит браузеру на сколько записей сдвинуться назад или вперед.

Если вы напишите так:

history.go(3);

То браузер перейдет на 3 записи вперед в истории.

Если написать так:

history.go(-1);

Тогда браузер вернется на одну запись назад.

Если переданное значение выходит за рамки, то ничего не произойдет и никакой ошибки не возникнет. В некоторых старых версияx IE можно передать в качестве параметра строку URL (должна совпадать со значением, которое хранится в записях сессии).

И наконец, чтобы перезагрузить страницу, можно написать так:

history.go(0);

 

history.back() & history.forward()

Оба метода (которые существовали до HTML5) не принимают аргументов. Названия методов отвечают их действию. back() заставляет перейти на 1 запись назад, forward() на 1 запись вперед.

Вы, вероятно, догадались, что history.back() эквивалентно history.go(-1) и history.forward() эквивалентно history.go(1).

 

history.pushState()

Этот метод добавляет записи в историю. Метод pushState() принимает три параметра:

  1. Состояния объекта, в формате JSON или другом, который можно сериализовать. В большинстве случаев вы не будете использовать этот параметр, но он все же может быть полезным для современных приложений.
  2. Заголовок страницы.
  3. URL, который должен отображаться в адресной строке.

Пример:

history.pushState(null, null, 'http://www.domain.com/whatever');

Если вы не используете первые два параметра, то в них можно передать значение null.

 

history.replaceState()

Метод replaceState() похож на pushState. Он использует те же параметры. Отличие заключается в том, что данный метод не добавляет запись, а изменяет текущую (или последнюю) запись в истории.

Например, мы посетили следующие ссылки:

http://www.alexdev.ru/#one
http://www.alexdev.ru/#two
http://www.alexdev.ru/#three

Если мы вызовем следующий код, когда находимся на третьей странице:

history.replaceState(null, null, 'http://www.alexdev.ru/#threeGone');

Тогда третья запись в истории изменится и значение URL будет равно тому, что мы передали в третий параметр.

 

PopState

Событие popstate должно отправляться каждый раз, когда мы получаем данные из объекта history.

Пример:

window.addEventListener('popstate', function(e) {
    // do stuff here
});

 

history.state

Наконец, последнее свойство — state. Вы можете прочитать данные, которые передаются методами pushState и replaceState путем доступа к state свойству.

 

Полезные ссылки

 

Поддержка браузерами

 

Спасибо за внимание!

Подписываемся на рассылку 😉

 

Автор статьи: Alex. Категория: HTML
Дата публикации: 22.07.2013