Mit pushState() können Sie den Referrer ändern, der im HTTP-Header für XMLHttpRequest-Objekte verwendet wird, die nach der Statusänderung erstellt wurden. Der Wert von referrer ist die URL des Dokuments, dessen Fenster zum Zeitpunkt der Erstellung des XMLHttpRequest-Objekts dieses ist.
pushState() erstellt einen neuen Eintrag im Browserverlauf, sodass Sie mit der Zurück-Schaltfläche zu vorherigen Seiten zurückkehren können. Inzwischen Geschichte. replaceState() ersetzt den aktuellen Eintrag und verhindert so die Möglichkeit, über den Zurück-Button zur vorherigen URL zurückzukehren.
Angenommen, der folgende JavaScript-Code wird auf der Seite http://x.org/foo.html ausgeführt:
js
Copy to Clipboard
let stateObj = {
foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");
Dies führt dazu, dass http://x.org/bar.html in der URL-Leiste angezeigt wird, der Browser die Seite bar.html jedoch nicht lädt und nicht einmal prüft, ob sie existiert.
Nehmen wir nun an, der Nutzer navigiert zu http://google.com und klickt dann auf die Schaltfläche „Zurück“. Als Ergebnis zeigt die URL http://x.org/bar.html an und History.state enthält stateObj. Das Popstate-Ereignis wird nicht ausgelöst, da die Seite neu geladen wurde. Die Seite selbst sieht wie bar.html aus.
Wenn der Benutzer erneut auf die Schaltfläche „Zurück“ klickt, ändert sich die URL in http://x.org/foo.html und das Dokument löst erneut ein Popstate-Ereignis aus, diesmal mit dem Statusobjekt, das auf Null gesetzt ist. In diesem Fall ändert das Zurückgehen auch nicht den Inhalt des Dokuments, wie im vorherigen Schritt, obwohl das Dokument selbst seinen Inhalt nach dem Empfang des Popstate-Ereignisses aktualisieren kann.
Die pushState()-Methode benötigt drei Parameter: ein Statusobjekt, einen Header (vorerst ignoriert) und einen (optionalen) „URL“-Parameter.
state object. Das Statusobjekt ist ein JavaScript-Objekt, das dem neuen Verlaufseintrag zugeordnet ist, der von pushState() erstellt wurde. Immer wenn der Benutzer zu einem neuen Status navigiert, tritt das Popstate-Ereignis auf und die Statuseigenschaft des Ereignisses enthält eine Kopie des Statusobjekts mit Verlaufseinträgen.
Ein Statusobjekt kann alles sein, was serialisiert werden kann. Da Firefox Statusobjekte auf der Festplatte des Benutzers speichert, damit sie nach dem Neustart des Browsers wiederhergestellt werden können, begrenzen wir die serialisierte Darstellung des Statusobjekts auf 640 KB. Wenn Sie ein Statusobjekt übergeben, dessen serialisierte Darstellung größer als dieser Wert ist, löst die Methode pushState() eine Ausnahme aus. Wenn Sie größeren Speicher benötigen, sollten Sie die Verwendung von sessionStorage und/oder localStorage in Betracht ziehen.
title. Header – Alle Browser außer Safari ignorieren diese Einstellung vorerst, werden dies aber möglicherweise in Zukunft tun. Aufgrund zukünftiger Änderungen an der Methode besteht eine sichere Lösung darin, einen leeren String zu übergeben. Alternativ können Sie einen kurzen Header für den Status übergeben, in den Sie wechseln.
URL. Dieser Parameter übergibt die URL eines neuen neuen Eintrags im Verlauf. Beachten Sie, dass der Browser nicht sofort nach dem Aufruf von pushState() versucht, die angegebene URL zu laden, sondern möglicherweise später versucht, dies zu tun, beispielsweise nachdem der Benutzer den Browser neu gestartet hat. Die neue URL muss nicht absolut sein; Wenn es relativ ist, wird es relativ zur aktuellen URL definiert. Die neue URL muss auf dieselbe Domäne, dasselbe Protokoll und denselben Port verweisen, andernfalls löst pushState() eine Ausnahme aus. Dieser Parameter ist optional; Wenn nicht angegeben, wird die URL des aktuellen Dokuments verwendet.
Der Aufruf von pushState() ähnelt in gewisser Weise dem Festlegen von window.location = „#foo“, da beide auch einen weiteren Verlaufseintrag erstellen und aktivieren, der mit dem aktuellen Dokument verknüpft ist.
Aber pushState() hat mehrere Vorteile:
Die neue URL kann eine beliebige URL innerhalb derselben Domäne, desselben Ports und Protokolls wie die aktuelle Adresse sein. Beim Festlegen von window.location bleiben Sie hingegen nur dann im selben Dokument, wenn Sie nur den Hash ändern. Eine Änderung der URL ist nicht erforderlich. Während die Einstellung window.location = “#foo”; erstellt nur dann einen neuen Eintrag im Verlauf, wenn der aktuelle Hash nicht #foo ist
Alle Daten können mit einem neuen Eintrag im Verlauf verknüpft werden. Beim Hash-basierten Ansatz müssen alle relevanten Daten in einen kurzen String kodiert werden. Wenn der Titelheader anschließend von Browsern verwendet wird, können diese Daten verwendet werden (unabhängig beispielsweise vom Hash). Beachten Sie, dass pushState() niemals das Hashchange-Ereignis auslöst, selbst wenn sich die neue URL nur im Hash von der alten unterscheidet.
In XUL-Dokumenten wird das angegebene XUL-Element erstellt. In anderen Dokumenten wird ein Element mit einem Null-Namespace-URI erstellt.
replaceState()-Methode. History.replaceState() funktioniert genauso wie History.pushState(), außer dass replaceState() den aktuellen Verlaufseintrag ändert, anstatt einen neuen Eintrag zu erstellen. Beachten Sie, dass dadurch nicht verhindert wird, dass ein neuer Eintrag im globalen Verlauf des Browsers erstellt wird.
replaceState() ist besonders nützlich, wenn Sie das Statusobjekt oder die URL des aktuellen Verlaufseintrags als Reaktion auf eine Benutzeraktion aktualisieren möchten.
Angenommen, der folgende JavaScript-Code wird auf der Seite http://x.org/foo.html ausgeführt:
let stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
Eine Erklärung dieser beiden Zeilen finden Sie im obigen Beispiel für die Methode pushState().
Nehmen wir als Nächstes an, dass JavaScript-Code auf der Seite http://x.org/bar.html ausgeführt wird:
history.replaceState(stateObj, "page 3", "bar2.html");
Dies führt dazu, dass http://x.org/bar2.html in der URL-Leiste angezeigt wird, der Browser jedoch nicht sofort bar2.html lädt oder gar prüft, ob diese Seite bar2.html vorhanden ist.
Nehmen wir nun an, der Benutzer geht zu http://www.microsoft.com und klickt dann auf die Schaltfläche „Zurück“. In diesem Fall wird http://x.org/bar2.html in der URL-Leiste angezeigt. Wenn der Benutzer erneut auf die Schaltfläche „Zurück“ klickt, zeigt die URL-Leiste http://x.org/foo.html an und umgeht bar.html vollständig.
Popstate-Ereignis. Das Popstate-Ereignis wird im Fenster immer dann ausgelöst, wenn sich der aktive Verlaufseintrag ändert. Wenn der zu aktivierende Verlaufseintrag durch einen Aufruf von pushState erstellt oder durch einen Aufruf von replaceState aktiviert wurde, enthält die Eigenschaft „state“ des Ereignisses „popstate“ eine Kopie des Verlaufseintrags des Ereignisobjekts.
Wenn eine Seite geladen wird, verfügt sie möglicherweise über ein Ereignisobjekt mit einem anderen Wert als „null“. Dies kann beispielsweise passieren, wenn die Seite ein Statusobjekt setzt (mithilfe von pushState() oder replaceState()) und der Benutzer dann den Browser neu startet. Wenn die Seite neu geladen wird, empfängt sie das Onload-Ereignis, jedoch nicht das Popstate-Ereignis. Wenn Sie jedoch die Eigenschaft „history.state“ lesen, erhalten Sie das Statusobjekt, das Sie erhalten hätten, wenn das Popstate-Ereignis aufgetreten wäre.
Mit der Eigenschaft „history.state“ können Sie beispielsweise den Status des aktuellen History-Eintrags lesen, ohne auf das Popstate-Ereignis warten zu müssen:
let currentState = history.state;
