Verwendung von window.history in js (1)

Window.history speichert den Website-Zugriffsdatensatz des Benutzers während einer Sitzung. Jedes Mal, wenn der Benutzer auf eine neue URL zugreift, wird ein neuer Verlaufseintrag erstellt.

history.go(), History.back(), History.forward()

History.back() und History.forward() repräsentieren jeweils die Rückwärts-Eins Seite und eine Seite weiter.

history.go(num) gibt an, wie viele Seiten vorwärts oder rückwärts geblättert werden sollen. Eine positive Zahl für num bedeutet, vorwärts zu blättern, und eine negative Zahl bedeutet, rückwärts zu blättern.

History.back() entspricht History.go(-1), History.forward() entspricht History.go(1).

Führen Sie eine dieser drei Methoden aus, um das Popstate-Ereignis des Browsers auszulösen. Wenn sich nur der Hash-Teil ändert, kann gleichzeitig auch das Hashchange-Ereignis ausgelöst werden.

Ändern Sie den Website-Pfad und erstellen Sie einen neuen Verlaufseintrag

history.pushState(statedata, title, url);

Die Parameter-URL muss denselben Ursprung haben wie die aktuelle URL , sonst wird ein Fehler gemeldet. Sie können nur den Pfad in der URL, das Fragment nach dem Nummernzeichen (d. h. Hash) oder den Abschnitt Abfrage nach dem Fragezeichen (?) in der URL ändern.

Jedes Mal, wenn pushState() ausgeführt wird, wird die aktuelle URL durch eine neue URL ersetzt, d. h. die URL der Adressleiste ändert sich, window.location.href ändert sich ebenfalls und es wird ein neuer Verlaufseintrag erstellt gleichzeitig erstellt. Die Ausführung von pushState() löst jedoch niemals das Hashchange-Ereignis aus.

Der Statedata-Parameter kann beliebige serialisierte Daten sein, die auf der Festplatte des Benutzers gespeichert sind. Allerdings gibt es Größenbeschränkungen für Statusdaten. Beispielsweise erlaubt Firefox nur 640 KB Zeichen.

Der Vorteil der Verwendung von pushState(): Nur der Hash-Teil der URL wird geändert und window.location verwendet dasselbe Dokument.

Kompatibilitätsprobleme

pushState wurde bis IE10 nicht unterstützt. In früheren Versionen von IE konnte dies nur durch Ändern von window.location="#foo" erreicht werden, aber dies würde das Hashchange-Ereignis auslösen .

Ändern Sie den Website-Pfad, aber erstellen Sie keinen neuen Verlaufseintrag

Wie Sie dem Titel entnehmen können, besteht der einzige Unterschied zwischen replaceState() und pushState() darin Es wird kein neuer Verlaufsdatensatz erstellt, sondern der aktuelle Verlaufsdatensatz wird direkt geändert.

history.replaceState(stateData, title, url);

Verlaufsdatensatzstatus

Es gibt zwei Möglichkeiten, auf die Statusinformationen von historischen Zugriffsdatensätzen zuzugreifen. Der Status gibt oben den Status des Datensatzes zurück des historischen Zugriffsstapels. Auf den PopStateEvent.state-Wert kann nur im Ereignis-Listener zugegriffen werden, wenn das PopStateEvent-Ereignis ausgelöst wird. Der Standardwert von

State kann in verschiedenen Browsern unterschiedlich sein. Beispielsweise ist der Standardwert unter IE10 undefiend, aber der Standardwert von IE10 und IE11 ist null. HTML5 Es wird empfohlen, nul als Standardwert zu verwenden.

Ereignis

Popstate-Ereignis

Call History.back(), History.forward(), History.go( ) und andere Methoden lösen das Popstate-Ereignis aus. Der einfache Aufruf von pushState() oder replaceState() löst das Popstate-Ereignis nicht aus.

Durch den Zugriff auf das Statusattribut des Ereignisses können die ursprünglich von pushState() oder replaceState() festgelegten Statusdaten abgerufen werden.

【Verwandte Empfehlungen】

1. Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen

2. Detaillierte Einführung in die Verwendungsbeispiele von History.pushState() in h5

3. Verwendung von window.history in js ( 2 )

4. Detailliertes Verständnis der Verlaufsfunktionen in h5-pushState, replaceState

Die Auswirkungen der Verlaufs-API in h5 zu Webanwendungen

Das obige ist der detaillierte Inhalt vonVerwendung von window.history in js (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!