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.

Сумісність

BCD tables only load in the browser

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

Довідка

Посібник