Introducerad sedan Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introducerar två metoder, histtory.pushState() och history.replaceState(), som möjliggör tillägg och modifiering av historikentiteter. Samtidigt fungerar dessa metoder med eventet window.onpostate.
Modifiera referrern med hjälp av history.pushState()-metoden, som kan användas i http-headern som skapats för xmlhttpRequest-objektet efter att tillståndet har ändrats. Denna referrer kommer att vara dokumentets URL när XMLHttpRequest skapades.
pushState används för att lägga till en post av den aktuella sidan i historiken, medan replaceState och pushState används exakt likadant, den enda skillnaden är att den används för att modifiera posten för den aktuella sidan i historiken.
exempel
Antag att http://mozilla.org/foo.html sida kör JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "sida 2", "bar.html");
Denna metod gör att URL-adressfältet visas http://mozilla.org/bar.html,Men webbläsaren laddar inte bar.html sida, även om den finns。
Anta nu återigen att användaren fortsätter att komma åt http://google.com och klickar tillbaka. Vid denna tidpunkt kommer URL:ens adressrad, http://mozilla.org/bar.html, sidan att få en popstate-händelse (chrome), som innehåller en kopia av stateObj. Den här sidan ser ut som foo.html. +
Vid denna punkt klickar vi tillbaka igen, och URL:en vänder http://mozilla.org/foo.html,document får ett nytt popstate-event och ett null-tillståndsobjekt. Denna returåtgärd ändrar inte dokumentets innehåll. (Kanske försöker den ladda efter ett tag...) Krom)
pushState-metoden
pushState() har tre parametrar: tillståndsobjekt, titel (nu ignorerad, ohanterad), URL (valfritt). Detaljer:
· Tillståndsobjekt – Tillståndsobjektet är ett Javascrip{filter}t-objekt som relaterar till en ny historikentitet skapad av pushState()-metoden. Används för att lagra information om de poster du vill infoga i historiken. Tillståndsobjektet kan vara vilken Json-sträng som helst. Eftersom Firefox använder användarens hårddisk för att komma åt tillståndsobjektet är det maximala lagringsutrymmet för detta objekt 640k. Om det är större än detta värde kastar pushState()-metoden ett undantag. Om du behöver mer utrymme att förvara, använd lokal förvaring.
· titel—Firefox ignorerar denna parameter nu, även om den kan komma att användas i framtiden. Det säkraste sättet att använda den nu är att skicka en tom sträng för att förhindra framtida modifieringar. Eller så kan du skicka en kort titel för att ange delstaten
· URL – Denna parameter används för att skicka URL:en till den nya historikenheten, observera att webbläsaren inte kommer att ladda denna URL efter att pushState()-metoden har anropats. Men kanske försöker den ladda denna URL efter ett tag. Till exempel, efter att användaren startat om webbläsaren kan den nya URL:en inte vara en absolut sökväg. Om det är en relativ väg, så kommer den att vara relativ till den befintliga URL:en. Den nya url:en måste vara samdomän med den befintliga url:en, annars kommer pushState() att kasta ett undantag. Denna parameter är valfri, och om den är tom placeras den som dokumentets aktuella URL.
På ett sätt är anropet av pushState()-metoden ungefär som att sätta window.locatio{filter}n = "#foo", vilka båda skapar och aktiverar en annan historikenhet kopplad till det aktuella dokumentet, men pushState() har några ytterligare fördelar:
Den nya URL:en kan vara vilken URL som helst som finns i samma domän som den aktuella URL:en, till skillnad från att window.locatio{filter}n stannar i samma dokument om endast hash är satt.
Du kan låta URL:en vara oförändrad om du inte behöver. Som jämförelse, sätt window.locatio{filter}n = "#foo"; Endast nya historikentiteter genereras om din nuvarande hash inte är #foo
Du kan associera godtycklig data med din nya historikentitet. Med en hashbaserad metod måste all relevant data kodas i en kort sträng.
Observera att pushState()-metoden inte gör hashbytestiden, även om den gamla och nya URL:en bara är olika hashar.
replaceState()-metoden
history.replaceState() används mycket likt pushState(), förutom att replaceState() används för att ändra den aktuella historikentiteten istället för att skapa en ny. Denna metod kan ibland vara användbar när du behöver uppdatera ett tillståndsobjekt eller den aktuella historikentiteten som svar på visst användarbeteende, och du kan använda den för att uppdatera URL:en till tillståndsobjektet eller den aktuella historikenheten.
Popstate-evenemang
När historikenheten ändras kommer popstate-händelsen att inträffa. Om historikenheten genereras av pushState- och replaceState-metoderna, kommer statusattributet för popstate-händelsen att innehålla en kopia av tillståndsobjektet från historikenheten
Se window.onpopstate för detaljer
Läs det aktuella tillståndet
Läs det befintliga tillståndet
När sidan laddas kan den ha ett icke-tomt tillståndsobjekt. Detta kan hända när sidan sätter ett tillståndsobjekt (med pushState eller replaceState) och användaren startar om webbläsaren. När sidan laddas om får sidan en inlastningshändelse, men det finns ingen popstate-händelse. Men om du läser history.state-egenskapen får du detta state-objekt efter att popstate-händelsen inträffat
History.pushState() dokumentation: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Parametern för den mottagande URL:en är av typen sträng, som används för att ändra URL:en för den aktuella adressfältet. En sak att notera är att denna parameter inte kan vara densamma som för cross-domain, det vill säga protokollet, domännamnet och porten måste vara desamma.
Uncaught DOMException: Misslyckades med att köra 'pushState' på 'History': Ett historiktillståndsobjekt med URL 'http://www.test.com/' kan inte skapas i ett dokument med ursprung ' https://www.itsvse.com' och URL 'https://www.itsvse.com/'.
kl. <anonymous>:1:9
Korrekt kod:
|
Publicerad på 2017-09-12 13:55:04
|
|
|
|
Publicerad på 2017-10-27 09:51:10