History API

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

DOM-объект Window предоставляет доступ к истории текущей сессии браузера (не путать с историей браузерных расширений) через объект history. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.

Понятия и использование

Перемещение назад и вперёд по истории пользователя выполняется с помощью методов back(), forward(), и go().

Перемещение вперёд и назад

Чтобы переместиться назад по истории:

js
window.history.back();

Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера. Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):

js
window.history.forward();

Перемещение к определённой странице в истории

Вы можете использовать метод go() для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется 0.

Вернуться на одну страницу назад (равноценно вызову back()):

js
window.history.go(-1);

Перейти на одну страницу вперёд (равноценно вызову forward())

js
window.history.go(1);

По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент 2, и так далее.

Кроме того, метод go() можно использовать для обновления текущей страницы, передавая аргумент 0 или вызывая его без аргументов:

// Обе следующих инструкции обновляют текущую страницу
window.history.go(0)
window.history.go()

Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства length:

js
var numberOfEntries = window.history.length;

Интерфейсы

History

Позволяет манипулировать историей сессии браузера (то есть, страницами, посещёнными в той же закладке, что и текущая страница.

Примеры

В следующем примере свойству onpopstate назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замены и перемещения по истории текущей вкладки браузера

window.onpopstate = function(event) {
  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
}

history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")
history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"

Спецификации

Specification
HTML
# the-history-interface

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
History
back
forward
go
length
pushState
Whether the unused parameter is used
DeprecatedNon-standard
replaceState
Whether the unused parameter is used
DeprecatedNon-standard
scrollRestoration
state

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

Смотрите также

Справочники

Руководства