Введено з часів Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 вводить два методи — histtory.pushState() та history.replaceState(), які дозволяють додавати та змінювати історичні сутності. Водночас ці методи працюють із подією window.onpostate.
Модифікувати реферер за допомогою методу history.pushState(), який можна використати в заголовку http, створеному для об'єкта xmlhttpRequest після зміни стану. Цей реферер буде URL документа на момент створення XMLHttpRequest.
pushState використовується для додавання запису поточної сторінки до історії, тоді як replaceState і pushState використовуються однаково, єдина різниця в тому, що він використовується для зміни запису поточної сторінки в історії.
приклад
Припустимо http://mozilla.org/foo.html сторінка виконує JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, «сторінка 2», «bar.html»);
Цей метод змусить URL-адресний рядок відображати http://mozilla.org/bar.html,Але браузер не завантажує bar.html сторінку, навіть якщо вона існує。
Тепер знову припустимо, що користувач продовжує користуватися http://google.com і повертається назад. У цей момент адресний рядок URL, http://mozilla.org/bar.html, сторінка отримає popstate event (Chrome), який міститиме копію stateObj. Ця сторінка виглядає як foo.html. +
У цей момент ми знову натискаємо назад, і URL повертається, http://mozilla.org/foo.html,document з'являється ще одна подія popstate і об'єкт null state. Ця дія повернення не змінює зміст документа. (Можливо, через деякий час він спробує завантажитися...) хром)
Метод pushState
pushState() має три параметри: об'єкт стану, заголовок (тепер ігнорований, не оброблений), URL (опціонально). Конкретика:
· об'єкт стану – об'єкт стану є об'єктом Javascrip{filter}t, який стосується нової історичної сутності, створеної методом pushState(). Використовується для зберігання інформації про записи, які ви хочете додати в історію. Об'єктом стану може бути будь-який рядок Json. Оскільки Firefox використовує жорсткий диск користувача для доступу до об'єкта стану, максимальний об'єм зберігання цього об'єкта становить 640k. Якщо він більший за це значення, метод pushState() створює виключення. Якщо потрібно більше місця для зберігання, використовуйте локальне зберігання.
· Заголовок — Firefox зараз ігнорує цей параметр, хоча він може бути використаний у майбутньому. Найбезпечніший спосіб використовувати його зараз — передати порожній рядок, щоб запобігти майбутнім модифікаціям. Або можна передати короткий титул, щоб вказати штат
· URL - Цей параметр використовується для передачі URL нової історичної сутності, зверніть увагу, що браузер не завантажить цей URL після виклику методу pushState(). Але, можливо, через деякий час він спробує завантажити цей URL. Наприклад, після перезавантаження браузера нова URL не може бути абсолютним шляхом. Якщо це відносний шлях, то він буде відносно існуючої URL. Нова URL має бути кодоменною з існуючою, інакше pushState() викине виняток. Цей параметр є необов'язковим, і якщо він порожній, він буде розміщений як поточна URL документа.
У певному сенсі, виклик методу pushState() схожий на встановлення window.locatio{filter}n = "#foo", обидва створюють і активують ще одну історичну сутність, пов'язану з поточним документом, але pushState() має додаткові переваги:
Нова URL може бути будь-якою URL, що знаходиться в тому ж домені, що й поточна URL, на відміну від window.locatio{filter}n, що залишається в тому ж документі, якщо встановлено лише хеш.
l Ви можете залишити URL незмінним, якщо це не потрібно. Для порівняння, встановіть window.locatio{filter}n = "#foo"; Генеруються лише нові історичні сутності, якщо ваш поточний хеш не #foo
Ви можете пов'язати довільні дані з новою історичною сутністю. При хешовому підході всі релевантні дані мають бути закодовані у короткий рядок.
Зверніть увагу, що метод pushState() не забезпечує час зміни хешу, навіть якщо старі та нові URL-адреси — це просто різні хеши.
метод replaceState()
history.replaceState() використовується подібно до pushState(), але replaceState() використовується для зміни поточної історичної сутності замість створення нової. Цей метод іноді може бути корисним, коли потрібно оновити об'єкт стану або поточну історичну сутність у відповідь на певну поведінку користувача, а також використовувати його для оновлення URL об'єкта стану або поточної історичної сутності.
Подія Popstate
Коли історична сутність змінюється, відбувається подія popstate. Якщо історична сутність генерується методами pushState та replaceState, атрибут стану події popstate міститиме копію об'єкта стану з історичної сутності
Дивіться window.onpopstate для деталей
Прочитайте поточний стан
Прочитайте існуючий стан
Коли сторінка завантажується, вона може мати об'єкт стану, який не є порожнім. Це може статися, коли сторінка встановлює об'єкт стану (використовуючи pushState або replaceState), і користувач перезапускає браузер. Коли сторінка перезавантажується, вона отримає подію onload, але popstate події не буде. Однак, якщо ви прочитаєте властивість history.state, ви отримаєте цей об'єкт стану після настання події popstate
History.pushState() документація: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Параметр приймаючої URL — це рядок типу, який використовується для зміни URL поточного адресного рядка. Варто зазначити, що цей параметр не може бути таким самим, як крос-домен, тобто протокол, доменне ім'я та порт мають бути однаковими.
Невиявлений DOMException: Не вдалося виконати 'pushState' на 'History': Об'єкт стану історії з URL 'http://www.test.com/' не може бути створений у документі з джерелом ' https://www.itsvse.com' та URL 'https://www.itsvse.com/'.
на <anonymous>:1:9
Правильний код:
|
Опубліковано 12.09.2017 13:55:04
|
|
|
|
Опубліковано 27.10.2017 09:51:10