Появилось с 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 (Chrome), которое будет содержать копию stateObj. Эта страница выглядит как foo.html. +
В этот момент мы снова кликаем назад, и URL поворачивается, http://mozilla.org/foo.html,document появляется ещё одно событие popstate и объект null state. Это действие возврата не меняет содержание документа. (Возможно, через некоторое время он попытается загрузиться...) хром)
Метод pushState
pushState() имеет три параметра: объект состояния, заголовок (теперь игнорируется, не обрабатывается), URL (необязательно). Конкретики:
· объект состояния – объект состояния является объектом Javascrip{filter}t, который связан с новой исторической сущностью, созданной методом pushState(). Используется для хранения информации о записях, которые вы хотите вставить в историю. Объект State может быть любой строкой Json. Поскольку Firefox использует жёсткий диск пользователя для доступа к объекту состояния, максимальное пространство памяти этого объекта составляет 640k. Если оно больше этого значения, метод pushState() выдает исключение. Если вам действительно нужно больше места для хранения, используйте локальное хранилище.
· Заголовок — Firefox сейчас игнорирует этот параметр, хотя он может быть использован в будущем. Самый безопасный способ использовать его сейчас — передавать пустую строку, чтобы предотвратить будущие изменения. Или можно выдавать короткий титул, указывающий штат
· URL — этот параметр используется для передачи URL новой исторической сущности, обратите внимание, что браузер не загрузит этот URL после вызова метода pushState(). Но, возможно, через какое-то время он попытается загрузить этот URL. Например, после перезагрузки браузера новый URL может быть не абсолютным путём. Если это относительный путь, то он будет относительно существующего URL. Новый URL должен быть в кодомене с существующим, иначе pushState() выдаст исключение. Этот параметр необязательный, и если он пустой, он будет отображаться как текущий URL документа.
В некотором смысле, вызов метода pushState() похож на установку window.locatio{filter}n = «#foo», оба из которых создают и активируют ещё одну историю, связанную с текущим документом, но pushState() имеет дополнительные преимущества:
Новый 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), и пользователь перезагружает браузер. Когда страница перезагружается, она получит событие загрузки, но события 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 9:51:10