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
. Он предоставляет полезные методы и свойства, которые позволяют переходить назад и вперёд по истории пользователя и манипулировать её содержимым.
Понятия и использование
Перемещение вперёд и назад
Чтобы переместиться назад по истории:
window.history.back();
Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера. Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):
window.history.forward();
Перемещение к определённой странице в истории
Вы можете использовать метод go()
для загрузки конкретной страницы из истории сессии, определяемой её позицией относительно текущей страницы. Относительная позиция текущей страницы равняется 0
.
Вернуться на одну страницу назад (равноценно вызову back()
):
window.history.go(-1);
Перейти на одну страницу вперёд (равноценно вызову forward()
)
window.history.go(1);
По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент 2
, и так далее.
Кроме того, метод go()
можно использовать для обновления текущей страницы, передавая аргумент 0
или вызывая его без аргументов:
// Обе следующих инструкции обновляют текущую страницу window.history.go(0) window.history.go()
Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства length
:
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
History | ||||||||||||
back | ||||||||||||
forward | ||||||||||||
go | ||||||||||||
length | ||||||||||||
pushState | ||||||||||||
Whether the unused parameter is used | ||||||||||||
replaceState | ||||||||||||
Whether the unused parameter is used | ||||||||||||
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.