Въведено от 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. Това действие за връщане не променя съдържанието на документа. (Може би след време ще опита да зареди...) Chrome)
Метод pushState
pushState() има три параметъра: обект на състояние, заглавие (сега игнорирано, необработено), URL адрес (по избор). Подробности:
· state object – State обектът е Javascrip{filter}t обект, който се отнася до нов исторически обект, създаден от метода pushState(). Използва се за съхранение на информация за записите, които искате да вмъкнете в историята. Обектът State може да бъде всяка Json низ. Тъй като Firefox използва твърдия диск на потребителя за достъп до обекта на състоянието, максималното пространство за съхранение на този обект е 640k. Ако е по-голяма от тази стойност, методът pushState() хвърля изключение. Ако ви трябва повече място за съхранение, използвайте локално съхранение.
· заглавие — Firefox сега игнорира този параметър, въпреки че може да бъде използван в бъдеще. Най-безопасният начин да го използваш сега е да подадеш празен низ, за да предотвратиш бъдещи модификации. Или можете да предадете кратка титла, за да посочите щата
· URL - Този параметър се използва за предаване на URL адреса на новата историческа единица, като имайте предвид, че браузърът няма да зареди този URL след извикване на метода pushState(). Но може би след време ще опита да зареди този URL. Например, след като потребителят рестартира браузъра, новият 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, атрибутът state на popstate събитието ще съдържа копие на обекта state от историческата единица
Вижте window.onpopstate за подробности
Прочетете настоящото състояние
Прочетете съществуващото състояние
Когато страницата се зарежда, тя може да има обект за състояние без празен характер. Това може да се случи, когато страницата зададе обект на състояние (чрез pushState или replaceState) и потребителят рестартира браузъра. Когато страницата се презареди, тя ще получи събитие за зареждане, но няма да има събитие с popstate. Въпреки това, ако прочетете свойството history.state, ще получите този обект на състояние след настъпването на popstate събитието
Документация History.pushState(): https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Параметърът на получаващия URL е тип низ, който се използва за промяна на URL адреса на текущия адресен ред. Едно нещо, което трябва да се отбележи, е, че този параметър не може да е същият като cross-domain, тоест протоколът, домейн името и портът трябва да са еднакви.
Неоткрит 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 ч.