DOM window об'єкт надає доступ до історії браузера через об'єкт history. Він розширює корисні властивості і методи, які дозволяють рухатися вперед і назад по історії користувача, а також - починаючи з HTML5 - маніпулювати вмістом стека історії.
Подорож по історії
Переміщайтеся вперед і назад по історії, використовуючи методи back (). forward () і go ().
Пересування вперед і назад
Щоб переміститися назад, зробіть:
Це буде діяти так само, як якби користувач натиснув на кнопку Назад на панелі інструментів браузера.
Схожим чином, ви можете переміщатися вперед (як якби користувач натиснув на кнопку Уперед), так:
Переміщення на певний момент в історії
Ви можете використовувати метод go (). щоб завантажити конкретну сторінку з історії сесії, яка визначається відносною позицією до поточної сторінці (відносний показник поточної сторінки дорівнює 0).
Переміститися на сторінку назад (еквівалент back ()):
Вперед на сторінку (або викликавши forward ()):
Крім того, ви можете рухатися вперед на 2 сторінки, передаючи 2, і так далі.
Ви можете визначити кількість сторінок в стеці історії, подивившись властивість length:
Зауваження: Internet Explorer підтримує передачу URL в go (); це не стандартизовано і не підтримується в Gecko.
Додавання і зміна записів історії
У HTML5 були представлені методи history.pushState () і history.replaceState (). які дозволяють додавати і змінювати записи історії, відповідно. Ці методи працюють разом з подією window.onpopstate.
Використовуючи history.pushState () можна змінити referrer, який буде використовуватися в HTTP заголовку referrer для XMLHttpRequest об'єктів. Referrer буде URL документа, у вікні якого створили об'єкт XMLHttpRequest.
Метод pushState ()
pushState () приймає три параметри: об'єкт стану, заголовок (зараз ігнорується) і необов'язковий URL. Давайте розглянемо кожен з цих трьох параметрів більш детально:
Об'єкт стану може бути всім, що може серіалізіроваться. Так як Firefox зберігає його на диск користувача, він може бути відновлений, після того, як користувач перезапустить браузер. Ми наклали обмеження на цей об'єкт в 640Кб. Якщо ви передасте більший об'єкт в pushState (). метод кине виняток. Якщо вам потрібно більше місця використовуйте sessionStorage і / або localStorage.
заголовок - Firefox в даний момент ігнорує цей параметр, хоча може почати використовувати його в майбутньому. Передача порожнього рядка буде безпечна для наступних реалізацій методу. Хоча можете додати заголовок для стану, до якого ви прямуєте.
URL - URL нового запису історії. Зауважте, що браузер не намагається завантажити цей URL після виклику pushState (). хоча може спробувати пізніше, наприклад, коли користувач перезапустить браузер. URL не обов'язково бути абсолютним, він може бути відносним поточної сторінки. Новий URL повинен йти на той же домен, протокол і порт, інакше, pushState () буде лаятися. Параметр не обов'язковий, якщо він не вказаний використовуватиметься URL поточного документа.
Зауваження: В Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) до Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), який передається об'єкт серіарілізовался в JSON. Починаючи з Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), об'єкт обробляється за алгоритмом структурованого клонування. Він дозволяє передавати більш широке розмаїття об'єктів.
У певному сенсі, виклик pushState () схожий на установку window.location = "#foo". в обох випадках буде створюватися і активуватися інший запис історії, пов'язана з поточним документом. Але у pushState () кілька переваг:
Варто відзначити, що pushState () ніколи не викликає подія hashchange. навіть якщо новий URL відрізняється тільки хешем.
У XUL-документа він створює зазначений XUL-елемент.
В інших документах він створює елемент з null namespace URI.
Метод replaceState ()
history.replaceState () працює також, як і history.pushState (). але replaceState () замінює останній запис історії замість створення нової.
replaceState () особливо корисна, коли ви хочете оновити об'єкт стану або URL поточного запису історії у відповідь на дії користувача.
Зауваження: В Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) до Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), який передається об'єкт серіарілізовался в JSON. Починаючи з Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), об'єкт обробляється за алгоритмом структурованого клонування. Він дозволяє передавати більш широке розмаїття об'єктів.
подія popstate
Popstate подія викликається кожного разу, коли історія зміняться. Якщо запис історії була створена за допомогою виклику pushState або replaceState. властивість state події popstate містить копію запису історії.
Дивіться приклад використання window.onpopstate.
Читання поточного стану
Коли сторінка завантажується, об'єкт стану може бути не null. Це може статися в разі, якщо сторінка встановила об'єкт стану (використовуючи pushState () або replaceState ()), а потім користувач перезавантажив браузер. Коли сторінка перезавантажується, відбудеться подія onload. але не popstate. Однак, якщо ви подивитеся на history.state, то отримаєте об'єкт стану, який отримали б у разі, якщо подія popstate сталося.
Ви можете прочитати об'єкт стану поточного запису історії, без очікування події popstate використовуючи властивість history.state:
Для повного прикладу AJAX сайту, дивіться: Ajax приклад навігації.