Die neuen HTML5-Funktionen pushState, replaceState und der Unterschied zwischen den beiden _html5-Tutorial-Fähigkeiten

Das Fensterobjekt im DOM ermöglicht den Zugriff auf den Browserverlauf über die window.history-Methode, sodass Sie im Zugriffsdatensatz des Benutzers vorwärts und rückwärts navigieren können.

Beginnend mit HTML5 können wir mit der Bearbeitung dieses Verlaufsstapels beginnen.

1. Verlauf

Verwenden Sie die Methoden back(), forward() und go(), um im Verlauf des Benutzers vorwärts zu gelangen Zurück

Vor und zurück

Zurück:

Code kopieren

Der Code lautet wie folgt:

window.history.back();

Diese Methode verhält sich so, als hätte der Benutzer auf die Zurück-Taste in der Browser-Symbolleiste geklickt.

Ähnlich kann auch die folgende Methode verwendet werden, um Benutzer-Weiterleitungsverhalten zu generieren:

Code kopieren

Der Code lautet wie folgt:

window.history.forward();

An eine bestimmte Position im Verlauf verschieben

Sie Sie können die Methode go() verwenden, um eine bestimmte Seite aus dem Sitzungsverlauf zu laden.

Eine Seite zurückgehen:

Kopieren Sie den Code

Der Code lautet wie folgt:

window.history.go(-1);

Eine Seite vorwärts:

Code kopieren

Der Code lautet wie folgt:

window.history.go(1)

Ähnlich, Sie können mehrere Seiten vor- oder zurückblättern.

Sie können die Gesamtzahl der Seiten im Verlaufsstapel auch ermitteln, indem Sie die Längeneigenschaft des Browserverlaufs überprüfen.

Code kopieren

Der Code lautet wie folgt:

var numberOfEntries = window.history .length;

Hinweis: IE unterstützt die Übergabe von URL-Parametern an die go()-Methode.

2. Verlaufselemente hinzufügen und ändern

Eingeführt seit Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5 führte die beiden Methoden History.pushState() und History.replaceState() ein, die das Hinzufügen und Ändern von Verlaufsentitäten ermöglichen. Gleichzeitig funktionieren diese Methoden mit dem window.onpostate-Ereignis.

Verwenden Sie die Methode „history.pushState()“, um den Referrer zu ändern. Diese Methode kann im http-Header verwendet werden, der für das xmlhttpRequest-Objekt erstellt wurde, nachdem der Status geändert wurde. Dieser Referrer ist beim Erstellen der XMLHttpRequest die URL des Dokuments.

pushState wird verwendet, um den Datensatz der aktuellen Seite zum Verlauf hinzuzufügen, während replaceState genauso verwendet wird wie pushState. Der einzige Unterschied besteht darin, dass es zum Ändern des Datensatzes der aktuellen Seite im Verlauf verwendet wird.

Beispiel

Angenommen, die Seite http://mozilla.org/foo.html führt JS aus

Kopieren Code

Der Code lautet wie folgt:

var stateObj = { foo: "bar" }; html ");

Diese Methode führt dazu, dass in der URL-Adressleiste http://mozilla.org/bar.html angezeigt wird, der Browser jedoch die Seite bar.html nicht lädt, selbst wenn diese Seite vorhanden ist.

Gehen wir nun erneut davon aus, dass der Nutzer zu http://google.com weitergeht und zurück klickt. Zu diesem Zeitpunkt lautet die URL-Adressleiste http://mozilla.org/bar.html und die Seite erhält das Popstate-Ereignis (Chrome). Dieses Statusobjekt enthält eine Kopie von stateObj. Diese Seite sieht aus wie foo.html.

Zu diesem Zeitpunkt klicken wir erneut auf „Zurück“, die URL wird zu „http://mozilla.org/foo.html“ und das Dokument erhält ein weiteres Popstate-Ereignis und ein Nullstatusobjekt. Diese Rückgabeaktion ändert den Inhalt des Dokuments nicht. (Versuchen Sie vielleicht nach einer Weile, Chrome zu laden.)

pushState-Methode

pushState() hat drei Parameter: Statusobjekt, Titel (wird jetzt ignoriert und nicht verarbeitet), URL (optional). Spezifische Details:

· Zustandsobjekt – Das Zustandsobjekt ist ein JavaScript-Objekt, das mit der neuen Verlaufsentität verknüpft ist, die durch die Methode pushState() erstellt wurde. Wird zum Speichern von Informationen über den Eintrag verwendet, den Sie in den Verlauf einfügen möchten. Das Statusobjekt kann eine beliebige JSON-Zeichenfolge sein. Da Firefox für den Zugriff auf das Statusobjekt die Festplatte des Benutzers verwendet, beträgt der maximale Speicherplatz dieses Objekts 640 KB. Wenn er größer als dieser Wert ist, löst die Methode pushState() eine Ausnahme aus. Wenn Sie wirklich mehr Speicherplatz benötigen, verwenden Sie lokalen Speicher.

· Titel – Firefox ignoriert diesen Parameter jetzt, obwohl er möglicherweise in Zukunft verwendet wird. Der sicherste Weg, es jetzt zu verwenden, besteht darin, eine leere Zeichenfolge zu übergeben, um zukünftige Änderungen zu verhindern. Oder Sie können einen kurzen Titel übergeben, um den Status darzustellen.

· URL – Dieser Parameter wird verwendet, um die URL der neuen Verlaufsentität zu übergeben. Beachten Sie, dass der Browser diese URL nach dem Aufruf der pushState()-Methode nicht lädt. Aber vielleicht wird es nach einer Weile versuchen, diese URL zu laden. Nachdem der Benutzer beispielsweise den Browser neu gestartet hat, ist die neue URL möglicherweise kein absoluter Pfad. Wenn es sich um einen relativen Pfad handelt, ist er relativ zur vorhandenen URL. Die neue URL muss sich in derselben Domäne wie die vorhandene URL befinden, andernfalls löst pushState() eine Ausnahme aus. Dieser Parameter ist optional. Wenn er leer ist, wird er auf die aktuelle URL des Dokuments gesetzt.

In gewissem Sinne ist der Aufruf der pushState()-Methode dem Festlegen von window.location = „#foo“ sehr ähnlich. Beide erstellen und aktivieren eine weitere Verlaufsentität, die mit dem aktuellen Dokument verknüpft ist, aber pushState(). )Es gibt auch einige Vorteile:

Die neue URL kann eine beliebige URL in derselben Domäne wie die aktuelle URL sein. Wenn Sie dagegen nur den Hash festlegen, bleibt window.location im selben Dokument.

Sie müssen die URL nicht ändern, wenn dies nicht erforderlich ist. Im Gegensatz dazu generiert die Einstellung window.location = "#foo"; nur eine neue Verlaufsentität. Wenn Ihr aktueller Hash nicht #foo ist

, können Sie Ihrer neuen Verlaufsentität beliebige Daten zuordnen. Bei Verwendung von Hash-basierten Methoden müssen alle relevanten Daten in einen kurzen String kodiert werden.

Beachten Sie, dass die Methode pushState() nicht dazu führt, dass die Hash-Änderungszeit auftritt, selbst wenn die alte und die neue URL nur unterschiedliche Hashes haben.

replaceState()-Methode

history.replaceState() wird ähnlich wie pushState() verwendet, außer dass replaceState() zum Ändern verwendet wird die aktuelle Verlaufsentität, anstatt eine neue zu erstellen. Diese Methode ist manchmal nützlich, wenn Sie ein Statusobjekt oder die aktuelle Verlaufsentität als Reaktion auf bestimmte Benutzeraktionen aktualisieren müssen. Sie können damit das Statusobjekt oder die URL der aktuellen Verlaufsentität aktualisieren.

Popstate-Ereignis

Wenn die Verlaufsentität geändert wird, tritt das Popstate-Ereignis auf. Wenn die Verlaufsentität durch die Methoden pushState und replaceState generiert wird, enthält das Statusattribut des Popstate-Ereignisses eine Kopie des Statusobjekts aus der Verlaufsentität

Einzelheiten finden Sie unter window.onpopstate

Aktuellen Status lesen

Vorhandenen Status lesen

Wenn die Seite geladen wird, verfügt sie möglicherweise über ein nicht leeres Statusobjekt. Dies kann passieren, wenn der Benutzer den Browser neu startet, nachdem die Seite ein Statusobjekt festgelegt hat (mithilfe von pushState oder replaceState). Wenn die Seite neu geladen wird, empfängt die Seite das Onload-Ereignis, es gibt jedoch kein Popstate-Ereignis. Wenn Sie jedoch die Eigenschaft „history.state“ lesen, erhalten Sie das Statusobjekt, nachdem das Popstate-Ereignis auftritt
var currentState = History.state;
Browser: Getestet und in Betrieb

HTML5-Browser

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4-Browser

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS vor Version 4.3

pushState und replaceState Difference

history.pushState(state, title, url)

-------------------- - ------------------------------------------------- - ---------

Fügen Sie die aktuelle URL und den aktuellen History.state zum Verlauf hinzu und ersetzen Sie die aktuelle durch den neuen Status und die neue URL. Die Seite wird dadurch nicht aktualisiert.

Status: Statusinformationen, die der URL entsprechen, zu der gesprungen werden soll.

titre : Pas besoin de transmettre

url : adresse URL vers laquelle accéder, ne peut pas traverser le domaine.

history.replaceState(état, titre, url)

-------------------------- -- ------------------------------------------------ --

Remplacez l'état et l'URL actuels par le nouveau. Cela n’entraînera pas l’actualisation de la page.

state : informations d'état correspondant à l'URL vers laquelle accéder.

titre : ne peut pas être transmis

url : adresse URL vers laquelle accéder, ne peut pas traverser le domaine.

------------------------------------------------------ ------ ------------------------------------

Il semble Il n'y a pas de différence entre les deux, mais en fait, la grande différence est que pushState ajoute des enregistrements d'historique, alors que replaceState ne le fait pas.