Introduceret siden Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introducerer to metoder, histtory.pushState() og history.replaceState(), som tillader tilføjelse og ændring af historik-enheder. Samtidig fungerer disse metoder med window.onpostate-begivenheden.
Ændr referreren ved hjælp af history.pushState()-metoden, som kan bruges i http-headeren oprettet for xmlhttpRequest-objektet efter at tilstanden er blevet ændret. Denne refererer vil være URL'en til dokumentet, da XMLHttpRequest blev oprettet.
pushState bruges til at tilføje en post af den aktuelle side til historikken, mens replaceState og pushState bruges på nøjagtig samme måde, men den eneste forskel er, at det bruges til at ændre posten for den aktuelle side i historikken.
eksempel
Antag, at http://mozilla.org/foo.html side udfører JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "side 2", "bar.html");
Denne metode får URL-adresselinjen til at vise http://mozilla.org/bar.html,Men browseren indlæser ikke bar.html side, selvom den eksisterer。
Antag igen, at brugeren fortsætter med at tilgå http://google.com og klikker tilbage. På dette tidspunkt vil URL-adresselinjen, http://mozilla.org/bar.html siden få en popstate-begivenhed (chrome), som vil indeholde en kopi af stateObj. Denne side ligner foo.html. +
På dette tidspunkt klikker vi tilbage igen, og URL'en skifter http://mozilla.org/foo.html,document får endnu en popstate-begivenhed og et null-tilstandsobjekt. Denne returhandling ændrer ikke dokumentets indhold. (Måske prøver den at loade efter et stykke tid...) Chrome)
pushState-metoden
pushState() har tre parametre: tilstandsobjekt, titel (nu ignoreret, ikke håndteret), URL (valgfrit). Detaljer:
· tilstandsobjekt – Tilstandsobjektet er et Javascrip{filter}t-objekt, der relaterer til en ny historikenhed oprettet af pushState()-metoden. Bruges til at gemme information om de poster, du vil indsætte i historikken. Tilstandsobjektet kan være enhver Json-streng. Fordi Firefox bruger brugerens harddisk til at tilgå tilstandsobjektet, er det maksimale lagerplads for dette objekt 640k. Hvis den er større end denne værdi, kaster pushState()-metoden en undtagelse. Hvis du har brug for mere plads til opbevaring, så brug lokal opbevaring.
· titel—Firefox ignorerer denne parameter nu, selvom den muligvis vil blive brugt i fremtiden. Den sikreste måde at bruge det nu på er at sende en tom streng videre for at forhindre fremtidige ændringer. Eller du kan give en kort titel for at angive staten
· URL - Denne parameter bruges til at sende URL'en til den nye historikenhed, bemærk at browseren ikke indlæser denne URL efter at have kaldt pushState()-metoden. Men måske vil den efter et stykke tid prøve at indlæse denne URL. For eksempel kan den nye URL, efter brugeren genstarter browseren, ikke være en absolut sti. Hvis det er en relativ sti, vil den være relativ til den eksisterende URL. Den nye url skal være co-domain med den eksisterende url, ellers vil pushState() kaste en undtagelse. Denne parameter er valgfri, og hvis den er tom, vil den blive placeret som dokumentets aktuelle URL.
På en måde svarer kaldet af pushState()-metoden meget til at sætte window.locatio{filter}n = "#foo", som begge opretter og aktiverer en anden historikentitet tilknyttet det aktuelle dokument, men pushState() har nogle yderligere fordele:
Den nye URL kan være enhver URL, der er i samme domæne som den aktuelle URL, i modsætning til at window.locatio{filter}n forbliver i det samme dokument, hvis kun hash er sat.
Du kan lade URL'en være uændret, hvis du ikke har brug for det. Til sammenligning, sæt window.locatio{filter}n = "#foo"; Kun nye historik-enheder genereres, hvis din nuværende hash ikke er #foo
Du kan tilknytte vilkårlige data til din nye historikenhed. Med en hash-baseret tilgang skal alle relevante data kodes i en kort streng.
Bemærk, at pushState()-metoden ikke får hashændringstiden til at ske, selvom de gamle og nye urls blot er forskellige hashes.
replaceState()-metoden
history.replaceState() bruges meget ligesom pushState(), bortset fra at replaceState() bruges til at ændre den aktuelle historik-enhed i stedet for at oprette en ny. Denne metode kan nogle gange være nyttig, når du skal opdatere et tilstandsobjekt eller den aktuelle historik-enhed som svar på visse brugeradfærd, og du kan bruge den til at opdatere URL'en på tilstandsobjektet eller den aktuelle historik-enhed.
Popstate-begivenhed
Når historik-entiteten ændres, vil popstate-hændelsen indtræffe. Hvis historik-entiteten genereres af pushState- og replaceState-metoderne, vil tilstandsattributten for popstate-begivenheden indeholde en kopi af tilstandsobjektet fra historik-entiteten
Se window.onpopstate for detaljer
Læs den nuværende tilstand
Læs den eksisterende tilstand
Når siden indlæses, kan den have et ikke-tomt tilstandsobjekt. Dette kan ske, når siden sætter et tilstandsobjekt (ved brug af pushState eller replaceState), og brugeren genstarter browseren. Når siden genindlæses, vil siden modtage en indlæsningsbegivenhed, men der vil ikke være nogen popstate-begivenhed. Men hvis du læser history.state-egenskaben, får du dette state-objekt efter popstate-hændelsen finder sted
History.pushState() dokumentation: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Parameteren for den modtagende URL er af typen streng, som bruges til at ændre URL'en på den aktuelle adresselinje. En ting at bemærke er, at denne parameter ikke kan være den samme som cross-domain, det vil sige, at protokollen, domænenavnet og porten skal være den samme.
Uncaught DOMException: Mislykkedes i at udføre 'pushState' på 'History': Et historiktilstandsobjekt med URL 'http://www.test.com/' kan ikke oprettes i et dokument med oprindelse ' https://www.itsvse.com' og URL' 'https://www.itsvse.com/'.
kl. <anonymous>:1:9
Korrekt kode:
|
Opslået på 12/09/2017 13.55.04
|
|
|
|
Opslået på 27/10/2017 09.51.10