Lassen Sie uns kurz über die Verwendung von pushState und replaceState in H5 sprechen

HTML5 führt die Methoden „history.pushState()“ und „history.replaceState()“ ein, mit denen Verlaufseinträge hinzugefügt bzw. geändert werden können. Diese Methoden werden normalerweise in Verbindung mit window.onpopstate verwendet.

Angenommen, der folgende JavaScript-Code wird in http://mozilla.org/foo.html ausgeführt:

 var stateObj = { foo: bar };history.pushState(stateObj, page 2, bar.html);

Dies führt dazu, dass in der Adressleiste des Browsers „http://mozilla.org/bar.html“ angezeigt wird, der Browser jedoch nicht „bar.html“ lädt oder überprüft, ob „bar.html“ vorhanden ist.

Angenommen, der Nutzer besucht http://google.com und klickt auf die Schaltfläche „Zurück“. Zu diesem Zeitpunkt wird in der Adressleiste http://mozilla.org/bar.html angezeigt und die Seite löst das Popstate-Ereignis aus. Das Ereignisobjekt state enthält eine Kopie von stateObj. Die Seite selbst ist dieselbe wie foo.html, ihr Inhalt kann jedoch im Popstate-Ereignis geändert werden.

Wenn wir erneut auf die Schaltfläche „Zurück“ klicken, ändert sich die Seiten-URL in http://mozilla.org/foo.html und das Dokumentobjekt „document“ löst ein weiteres Popstate-Ereignis aus. Dieses Mal ist das Ereignisobjekt „State Object“ null. Auch hier ändert sich durch die Rückgabe nicht der Inhalt des Dokuments. Obwohl sich der Inhalt des Dokuments beim Empfang des Popstate-Ereignisses ändern kann, stimmt sein Inhalt weiterhin mit der vorherigen Präsentation überein.

pushState() erfordert drei Parameter: ein Statusobjekt, einen Titel (derzeit ignoriert) und (optional) eine URL. Lassen Sie uns diese drei Parameter im Detail erklären:

State-Objekt – Das State-Objekt state ist ein JavaScript-Objekt, das über pushState() neue Verlaufseinträge erstellt. Immer wenn der Benutzer zu einem neuen Status navigiert, wird das Popstate-Ereignis ausgelöst und die Statuseigenschaft des Ereignisses enthält eine Kopie des Statusobjekts des Verlaufseintrags.

title – Dieser Parameter wird derzeit ignoriert, kann aber in Zukunft verwendet werden. Die Übergabe einer leeren Zeichenfolge ist hier sicher, in Zukunft jedoch unsicher. Alternativ können Sie einen Kurztitel für den Sprungzustand übergeben.

URL – Dieser Parameter definiert den neuen historischen URL-Datensatz. Beachten Sie, dass der Browser diese URL nicht sofort nach dem Aufruf von pushState() lädt, sondern dass er diese URL unter bestimmten Umständen später laden kann, beispielsweise wenn der Benutzer den Browser erneut öffnet. Die neue URL muss kein absoluter Pfad sein. Wenn die neue URL ein relativer Pfad ist, wird sie als relativ zur aktuellen URL behandelt. Die neue URL muss denselben Ursprung wie die aktuelle URL haben, sonst löst pushState() eine Ausnahme aus. Dieser Parameter ist optional und standardmäßig auf die aktuelle URL eingestellt.

In gewisser Weise ähnelt der Aufruf von pushState() dem Setzen von window.location = #foo, beide erstellen und aktivieren einen neuen Verlaufseintrag auf der aktuellen Seite. Aber pushState() hat die folgenden Vorteile:

Die neue URL kann eine beliebige URL sein, die denselben Ursprung wie die aktuelle URL hat. Und wenn Sie „window.location“ festlegen, bleibt dieselbe Datei nur dann erhalten, wenn Sie nur den Hashwert geändert haben.

Auf Wunsch kann ein Verlaufsdatensatz erstellt werden, ohne die URL zu ändern. Durch Festlegen von window.location = #foo; wird nur dann ein neuer Verlaufseintrag erstellt, wenn der aktuelle Hash nicht #foo ist.

Wir können beliebige Daten mit neuen Verlaufselementen verknüpfen. Bei der Hashwert-basierten Methode müssen alle relevanten Daten in einen kurzen String kodiert werden.

Die Verwendung von History.replaceState() ist der von History.pushState() sehr ähnlich. Der Unterschied besteht darin, dass replaceState() das aktuelle Verlaufselement ändert, anstatt ein neues zu erstellen.

Immer wenn sich ein aktiver Verlaufseintrag ändert, wird das Popstate-Ereignis für das entsprechende Fensterobjekt ausgelöst. Wenn der aktuell aktive Verlaufseintrag durch die Methode „history.pushState()“ erstellt oder durch die Methode „history.replaceState()“ geändert wurde, enthält die Eigenschaft „state“ des Ereignisobjekts „popstate“ eine Kopie des Statusobjekts des Verlaufseintrags.

Wir können den Status auch direkt im Verlaufsobjekt abrufen, wie folgt:

 var currentState = History.state;

Es ist zu beachten, dass der Aufruf von History.pushState() oder History.replaceState() das Popstate-Ereignis nicht auslöst. Das Opstate-Ereignis wird nur bei bestimmten Aktionen des Browsers ausgelöst, z. B. beim Klicken auf die Schaltflächen „Zurück“ und „Vorwärts“ (oder beim Aufrufen der Methoden „history.back()“, „history.forward()“ und „history.go()“ in JavaScript).

Wenn die aktuelle Webseitenadresse http://example.com/example.html lautet, führen Sie den folgenden Code aus:

 window.onpopstate = function(event) { Alert(location: + document.location + , state: + JSON.stringify(event.state));};//Binde Ereignisverarbeitungsfunktion. , title 1, ?page=1); //Hinzufügen und Aktivieren eines Verlaufseintrags http://example.com/example.html?page=1, der Eintragsindex ist 1history.pushState({page: 2}, title 2, ?page=2); //Hinzufügen und Aktivieren eines Verlaufseintrags http://example.com/example.html?page=2, der Eintragsindex ist 2history.replaceState({page: 3}, title 3, ? page=3); //Ändern Sie den aktuell aktivierten Verlaufseintrag http://ex..?page=2 in http://ex..?page=3, und der Eintragsindex ist 3history.back(); Popup-Standort: http://example.com/example.html?page=1, Status: {page:1}history.back(); // Pop-up-Speicherort: http://example.com/example.html, Status: nullhistory. go(2); // Popup-Speicherort: http://example.com/example.html?page=3, Status: {page:3}

Wang Er verwendet pushState() hauptsächlich, weil es das Rückgabeereignis im Browser überwachen kann. Dies gilt auch für den folgenden Code (kann direkt ausgeführt werden).

 <body> <div>window.onpopstate kann das Return-Key-Ereignis überwachen</div> <script> History.pushState({}, ); window.onpopstate = function(event) { //Hier können Sie das Return-Ereignis des Browsers überwachen und tun Sie, was Sie tun möchten, //Zum Beispiel: zu einer anderen Webseite springen location.href = https://www.baidu.com };

Natürlich können Sie auch window.onhashchange verwenden, um das Rückgabeereignis im Browser zu überwachen. Bitte beachten Sie den folgenden Code (kann direkt ausgeführt werden):

 <body> <div>window.onhashchange kann das Return-Key-Ereignis überwachen</div> <script> setTimeout(()=>{ location.hash=a },100); setTimeout(()=>{ window.onhashchange = function(event) { location.href = https://www.baidu.com },200 </script></body>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.