Introdusert siden Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 introduserer to metoder, histtory.pushState() og history.replaceState(), som tillater tillegg og endring av historikkenheter. Samtidig fungerer disse metodene med window.onpostate-hendelsen.
Endre referreren ved å bruke history.pushState()-metoden, som kan brukes i http-headeren laget for xmlhttpRequest-objektet etter at tilstanden er endret. Denne referansen vil være URL-en til dokumentet da XMLHttpRequest ble opprettet.
pushState brukes til å legge til en post for den nåværende siden i historikken, mens replaceState og pushState brukes på nøyaktig samme måte, den eneste forskjellen er at den brukes til å endre posten til den nåværende siden i historikken.
eksempel
Anta at http://mozilla.org/foo.html siden kjører JS
var stateObj = { foo: "bar" }; history.pushState(stateObj, "side 2", "bar.html");
Denne metoden vil få URL-adresselinjen til å vise http://mozilla.org/bar.html,Men nettleseren laster ikke bar.html side, selv om den eksisterer。
Anta igjen at brukeren fortsetter å åpne http://google.com og klikker tilbake. På dette tidspunktet vil URL-adresselinjen, http://mozilla.org/bar.html siden få en popstate-hendelse (chrome), som vil inneholde en kopi av stateObj. Denne siden ser ut som foo.html. +
På dette tidspunktet klikker vi tilbake igjen, og URL-en vil snu http://mozilla.org/foo.html,document får en ny popstate-hendelse og et null-tilstandsobjekt. Denne returhandlingen endrer ikke innholdet i dokumentet. (Kanskje etter en stund prøver den å laste...) Chrome)
pushState-metoden
pushState() har tre parametere: tilstandsobjekt, tittel (nå ignorert, unhandled), URL (valgfritt). Detaljer:
· tilstandsobjekt – Tilstandsobjektet er et Javascrip{filter}t-objekt som relaterer seg til en ny historikk-enhet opprettet av pushState()-metoden. Brukes til å lagre informasjon om oppføringene du vil sette inn i historikken. Tilstandsobjektet kan være en hvilken som helst Json-streng. Fordi Firefox bruker brukerens harddisk for å få tilgang til tilstandsobjektet, er maksimal lagringsplass for dette objektet 640k. Hvis den er større enn denne verdien, kaster pushState()-metoden et unntak. Hvis du trenger mer lagringsplass, bruk lokal lagring.
· tittel—Firefox ignorerer denne parameteren nå, selv om den kan bli brukt i fremtiden. Den sikreste måten å bruke det på nå er å sende en tom streng for å forhindre fremtidige modifikasjoner. Eller du kan sende en kort tittel for å indikere delstaten
· URL – Denne parameteren brukes for å sende URL-en til den nye historikken, merk at nettleseren ikke vil laste denne URL-en etter å ha kalt pushState()-metoden. Men kanskje etter en stund vil den prøve å laste denne URL-en. For eksempel, etter at brukeren starter nettleseren på nytt, kan den nye URL-en ikke være en absolutt sti. Hvis det er en relativ sti, vil den være relativ til den eksisterende URL-en. Den nye url-en må være samdomene med den eksisterende url-en, ellers vil pushState() kaste et unntak. Denne parameteren er valgfri, og hvis den er tom, vil den bli plassert som den nåværende URL-en til dokumentet.
På en måte er det å kalle pushState()-metoden omtrent som å sette window.locatio{filter}n = "#foo", som begge oppretter og aktiverer en annen historikkenhet knyttet til det nåværende dokumentet, men pushState() har noen ekstra fordeler:
Den nye URL-en kan være hvilken som helst URL som er i samme domene som den nåværende URL-en, i motsetning til at window.locatio{filter}n forblir i samme dokument hvis bare hash er satt.
Du kan la URL-en være uendret hvis du ikke trenger det. Til sammenligning, sett window.locatio{filter}n = "#foo"; Kun nye historikkentiteter genereres hvis din nåværende hash ikke er #foo
Du kan knytte vilkårlig data til din nye historikk-enhet. Med en hash-basert tilnærming må all relevant data kodes i en kort streng.
Merk at pushState()-metoden ikke får hashendringstiden til å skje, selv om den gamle og nye URL-en bare er forskjellige hasher.
replaceState()-metoden
history.replaceState() brukes mye som pushState(), bortsett fra at replaceState() brukes til å endre den nåværende historikken-enheten i stedet for å opprette en ny. Denne metoden kan noen ganger være nyttig når du trenger å oppdatere et tilstandsobjekt eller den nåværende historikken-enheten som svar på visse brukeroppførsel, og du kan bruke den til å oppdatere URL-en til tilstandsobjektet eller den nåværende historikken.
PopState-arrangementet
Når historieenheten endres, vil popstate-hendelsen inntreffe. Hvis historieenheten genereres av pushState- og replaceState-metodene, vil tilstandsattributtet til popstate-hendelsen inneholde en kopi av tilstandsobjektet fra historikkenheten
Se window.onpopstate for detaljer
Les den nåværende tilstanden
Les den eksisterende tilstanden
Når siden lastes, kan den ha et ikke-tomt tilstandsobjekt. Dette kan skje når siden setter et tilstandsobjekt (ved bruk av pushState eller replaceState) og brukeren starter nettleseren på nytt. Når siden lastes inn på nytt, vil siden motta en innlastingshendelse, men det vil ikke være noen popstate-hendelse. Men hvis du leser history.state-egenskapen, vil du få dette state-objektet etter at popstate-hendelsen skjer
History.pushState() dokumentasjon: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Parameteren til mottaks-URL-en er av typen streng, som brukes til å endre URL-en til den nåværende adresselinjen. En ting å merke seg er at denne parameteren ikke kan være den samme som på tvers av domener, det vil si at protokollen, domenenavnet og porten må være den samme.
Uncaught DOMException: Mislykkedes i å utføre 'pushState' på 'History': Et historikktilstandsobjekt med URL 'http://www.test.com/' kan ikke opprettes i et dokument med opprinnelse ' https://www.itsvse.com' og URL 'https://www.itsvse.com/'.
kl. <anonymous>:1:9
Korrekt kode:
|
Publisert på 12.09.2017 13:55:04
|
|
|
|
Publisert på 27.10.2017 09:51:10