Introdus încă de la Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introduce două metode, histtory.pushState() și history.replaceState(), care permit adăugarea și modificarea entităților istorice. În același timp, aceste metode funcționează cu evenimentul window.onpostate.
Modifică refererul folosind metoda history.pushState(), care poate fi folosită în antetul http creat pentru obiectul xmlhttpRequest după ce starea a fost modificată. Acest referer va fi URL-ul documentului la crearea XMLHttpRequest.
pushState este folosit pentru a adăuga o înregistrare a paginii curente în istorie, în timp ce replaceState și pushState sunt folosite exact la fel, singura diferență fiind că este folosit pentru a modifica înregistrarea paginii curente din istorie.
exemplu
Să presupunem că http://mozilla.org/foo.html pagină execută JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "pagina 2", "bar.html");
Această metodă va face ca bara de adrese URL să se afișeze http://mozilla.org/bar.html,Dar browserul nu se va încărca bar.html pagină, chiar dacă există。
Acum presupune din nou că utilizatorul continuă să acceseze http://google.com și dă click înapoi. În acest moment, bara de adrese URL, http://mozilla.org/bar.html, pagina va primi un eveniment popstate (chrome), care va conține o copie a stateObj. Această pagină pare foo.html. +
În acest moment, dăm din nou click înapoi, iar URL-ul se va transforma http://mozilla.org/foo.html,document va primi un alt eveniment popstate și un obiect de stare nulă. Această acțiune de returnare nu schimbă conținutul documentului. (Poate după un timp va încerca să se încarce...) chrome)
Metoda pushState
pushState() are trei parametri: obiect state, titlu (acum ignorat, negestionat), URL (opțional). Detalii:
· obiect stare – Obiectul stare este un obiect Javascrip{filter}t care se referă la o nouă entitate istorică creată prin metoda pushState(). Folosite pentru a stoca informații despre intrările pe care vrei să le introduci în istoric. Obiectul de stare poate fi orice șir Json. Deoarece Firefox folosește hard disk-ul utilizatorului pentru a accesa obiectul de stare, spațiul maxim de stocare al acestui obiect este de 640k. Dacă este mai mare decât această valoare, metoda pushState() aruncă o excepție. Dacă ai nevoie de mai mult spațiu pentru depozitare, folosește stocare locală.
· titlu—Firefox ignoră acest parametru acum, deși ar putea fi folosit în viitor. Cel mai sigur mod de a-l folosi acum este să treci un șir gol pentru a preveni modificări viitoare. Sau poți folosi un titlu scurt pentru a indica statul
· URL - Acest parametru este folosit pentru a transmite URL-ul noii entități de istoric, rețineți că browserul nu va încărca acest URL după ce apelează metoda pushState(). Dar poate după un timp va încerca să încarce acest URL. De exemplu, după ce utilizatorul repornește browserul, noul URL poate să nu fie o cale absolută. Dacă este o cale relativă, atunci va fi relativă față de URL-ul existent. Noua URL trebuie să fie co-domeniu cu URL-ul existent, altfel pushState() va arunca o excepție. Acest parametru este opțional, iar dacă este gol, va fi plasat ca URL-ul curent al documentului.
Într-un anumit sens, apelarea metodei pushState() este asemănătoare cu setarea window.locatio{filter}n = "#foo", ambele creând și activând o altă entitate istorică asociată documentului curent, dar pushState() are unele avantaje suplimentare:
Noul URL poate fi orice URL care se află în același domeniu cu URL-ul curent, spre deosebire de window.locatio{filter}n care rămâne în același document dacă este setat doar hash-ul.
Poți lăsa URL-ul nemodificat dacă nu este nevoie. Pentru comparație, setați window.locatio{filter}n = "#foo"; Se generează doar entități noi de istoric, dacă hash-ul tău actual nu este #foo
Poți asocia date arbitrare cu noua ta entitate istorică. Cu o abordare bazată pe hash, toate datele relevante trebuie codificate într-un șir scurt.
Rețineți că metoda pushState() nu face ca timpul de schimbare a hash-ului să apară, chiar dacă URL-urile vechi și noi sunt doar hash-uri diferite.
metoda replaceState()
history.replaceState() este folosit foarte asemănător cu pushState(), cu excepția faptului că replaceState() este folosit pentru a modifica entitatea istorică curentă în loc să creeze una nouă. Această metodă poate fi uneori utilă atunci când trebuie să actualizezi un obiect de stare sau entitatea de istoric curent ca răspuns la anumite comportamente ale utilizatorului și o poți folosi pentru a actualiza URL-ul obiectului de stare sau entitatea de istoric curent.
Eveniment popstate
Când entitatea istorică este schimbată, va avea loc evenimentul popstate. Dacă entitatea de istoric este generată de metodele pushState și replaceState, atributul de stare al evenimentului popstate va conține o copie a obiectului de stare din entitatea de istoric
Vezi window.onpopstate pentru detalii
Citește starea actuală
Citiți starea actuală
Când pagina se încarcă, poate avea un obiect de stare nevid. Acest lucru se poate întâmpla atunci când pagina setează un obiect de stare (folosind pushState sau replaceState) și utilizatorul repornește browserul. Când pagina se reîncarcă, va primi un eveniment de încărcare, dar nu va exista niciun eveniment popstate. Totuși, dacă citești proprietatea history.state, vei primi acest obiect de stare după ce evenimentul popstate are loc
Documentația History.pushState(): https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Parametrul URL-ului receptor este de tip string, care este folosit pentru a schimba URL-ul barei de adrese curente. Un lucru de reținut este că acest parametru nu poate fi același cu cel cross-domain, adică protocolul, numele domeniului și portul trebuie să fie aceleași.
DOMException neprins: Nu s-a executat 'pushState' pe 'History': Un obiect history state cu URL-ul 'http://www.test.com/' nu poate fi creat într-un document cu origine ' https://www.itsvse.com' și URL-ul 'https://www.itsvse.com/'.
la <anonymous>:1:9
Cod corect:
|
Postat pe 12.09.2017 13:55:04
|
|
|
|
Postat pe 27.10.2017 09:51:10