С появлением 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() принимает три параметра:
- Состояния объекта, в формате JSON или другом, который можно сериализовать. В большинстве случаев вы не будете использовать этот параметр, но он все же может быть полезным для современных приложений.
- Заголовок страницы.
- 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 свойству.
Полезные ссылки
- Manipulating History for Fun & Profit (Dive Into HTML5)
- Manipulating the browser history (MDN)
- A First Look at the HTML5 History API (Nettuts+)
Поддержка браузерами
Спасибо за внимание!
Подписываемся на рассылку 😉