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:

let numberOfEntries = window.history.length

Інтерфейси

History
Дозволяє управляти історією сеансу браузера (відвіданими сторінками у вкладці або фреймі, куди завантажується поточна сторінка).

Приклади

В наступному прикладі призначається обробка подій через властивість onpopstate щоб проілюструвати деякі методи об’єкта історії для додавання, заміни та переміщення в історії браузера в поточній вкладці.

window.onpopstate = function(event) {
  console.log(`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() // виведе в консоль "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // виведе в консоль "location: http://example.com/example.html, state: null"
history.go(2)  // виведе в консоль "location: http://example.com/example.html?page=3, state: {"page":3}"

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

Специфікація Статус Коментар
HTML Living Standard
The definition of 'History' in that specification.
Living Standard No change from HTML5.
HTML5
The definition of 'History' in that specification.
Recommendation Initial definition.

Сумісність

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
HistoryChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 10Opera Full support 3Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
backChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
forwardChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
goChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
lengthChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
pushStateChrome Full support 5Edge Full support 12Firefox Full support 4
Notes
Full support 4
Notes
Notes 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 Full support 10Opera Full support 11.5Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes 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 Full support 11.5Safari iOS Full support 4.3Samsung Internet Android Full support 1.0
replaceStateChrome Full support 5Edge Full support 12Firefox Full support 4
Notes
Full support 4
Notes
Notes 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 Full support 10Opera Full support 11.5Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes 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 Full support 11.5Safari iOS Full support 4.3Samsung Internet Android Full support 1.0
scrollRestorationChrome Full support 46Edge Full support 79Firefox Full support 46IE No support NoOpera Full support 33Safari Full support YesWebView Android No support NoChrome Android Full support 46Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 5.0
stateChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

Дивіться також

Довідка

Посібник