History API


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

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

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

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

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

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}"

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'History' в этой спецификации.
Живой стандарт Нет изменений по сравнению с HTML5.
HTML5
Определение 'History' в этой спецификации.
Рекомендация Изначальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
HistoryChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 10Opera Полная поддержка 3Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
backChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
forwardChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
goChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
lengthChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
pushStateChrome Полная поддержка 5Edge Полная поддержка 12Firefox Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
IE Полная поддержка 10Opera Полная поддержка 11.5Safari Полная поддержка 5WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
Opera Android Полная поддержка 11.5Safari iOS Полная поддержка 4.3Samsung Internet Android Полная поддержка 1.0
replaceStateChrome Полная поддержка 5Edge Полная поддержка 12Firefox Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
IE Полная поддержка 10Opera Полная поддержка 11.5Safari Полная поддержка 5WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.
Opera Android Полная поддержка 11.5Safari iOS Полная поддержка 4.3Samsung Internet Android Полная поддержка 1.0
scrollRestorationChrome Полная поддержка 46Edge Полная поддержка 79Firefox Полная поддержка 46IE Нет поддержки НетOpera Полная поддержка 33Safari Полная поддержка ДаWebView Android Нет поддержки НетChrome Android Полная поддержка 46Firefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 5.0
stateChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.

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

Справочники

Руководства