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

In HTML-Dateien fügt die Methode „history.pushState()“ einen Zustand zum Browserverlauf hinzu.

pushState() benötigt drei Parameter: ein Statusobjekt, einen Titel (jetzt ignoriert) und eine optionale URL-Adresse . Diese drei Parameter werden im Folgenden im Detail untersucht:

Statusobjekt – Das Statusobjekt ist ein JS-Objekt, das sich auf den von der Methode pushState() erstellten Verlauf bezieht. Wenn der Benutzer zu einem neuen Status weitergeleitet wird, wird das Popstate-Ereignis ausgelöst. Die Statuseigenschaft des Ereignisses enthält das Statusobjekt des Verlaufs. (Anmerkung des Übersetzers: Kurz gesagt, es speichert JSON-Zeichenfolgen und kann in Popstate-Ereignissen verwendet werden.) Das Statusobjekt kann alles sein, was serialisiert werden kann. Da Firefox diese Objekte auf der Festplatte des Benutzers speichert und diese Statusobjekte daher wiederhergestellt werden, nachdem der Benutzer den Browser neu startet, legen wir für die serialisierte Darstellung des Statusobjekts eine maximale Zeichenfolgengröße von 640 KB fest. Wenn Sie ein Statusobjekt mit einer serialisierten Darstellung von mehr als 640 KB an die Methode pushState() übergeben, löst diese Methode eine Ausnahme aus. Wenn Sie mehr Speicherplatz benötigen, empfiehlt sich die Verwendung von sessionStorage oder localStorage.

Titel – Dieser Parameter wird jetzt von Firefox ignoriert und kann in Zukunft verwendet werden. Um mögliche zukünftige Änderungen zu berücksichtigen, ist es sicher, eine leere Zeichenfolge zu übergeben. Natürlich können Sie einen Kurztitel für den Staat angeben, in den Sie wechseln möchten. (Anmerkung des Übersetzers: Die meisten Browser unterstützen oder ignorieren diesen Parameter derzeit nicht. Verwenden Sie stattdessen am besten null.)

URL – Dieser Parameter gibt die Adresse des neuen historischen Datensatzes an. Bitte beachten Sie, dass der Browser diese URL nach dem Aufruf der pushState()-Methode nicht lädt, dies jedoch möglicherweise später geschieht, beispielsweise nachdem der Benutzer den Browser neu startet. Die neue URL muss keine absolute Adresse sein; wenn sie relativ ist, muss sie relativ zur aktuellen URL sein. Die neue URL muss denselben Ursprung haben wie die aktuelle URL; andernfalls löst pushState() eine Ausnahme aus. Dieser Parameter ist optional. Wenn er nicht angegeben wird, wird er auf die aktuelle URL des Dokuments gesetzt.

Hinweis: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) bis Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) werden die übertragenen Objekte mithilfe von JSON serialisiert. Ab Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) wird das Objekt mithilfe des strukturierten Klonalgorithmus serialisiert. Dadurch kann ein vielfältigeres Objekt übertragen werden.

In einigen Fällen entspricht der Aufruf von pushState dem Festlegen von window.location = „#foo“. In diesem Fall erstellen und aktivieren beide Aktionen einen weiteren Verlaufseintrag, der sich auf die aktuelle Seite bezieht.

Aber pushState() hat noch andere Vorteile:

Die neue URL kann eine beliebige Adresse unter demselben Ursprung der aktuellen URL sein. Im Gegenteil, wenn Sie window.location festlegen, bleiben Sie auf derselben Seite, es sei denn, Sie ändern nur den Hash.

Wenn dies nicht erforderlich ist, können Sie die URL nicht ändern und stattdessen festlegen window.location Auf „#foo“ gesetzt; erstellt nur dann einen neuen Verlaufseintrag, wenn der aktuelle Hash nicht #foo ist.

Sie können Ihrem neuen Verlaufseintrag beliebige Daten zuordnen Beim Hash-basierten Ansatz müssen Sie alle relevanten Daten in eine kurze Zeichenfolge kodieren. Sie können beliebige Daten mit Ihrem neuen Verlaufsdatensatz verknüpfen. Mithilfe eines Hash-basierten Ansatzes kodieren Sie alle relevanten Daten in einen kurzen String.

Bitte beachten Sie, dass die Methode pushState() niemals dazu führt, dass das Hashchange-Ereignis aktiviert wird, auch wenn sich die neue URL nur im Hash von der alten unterscheidet.

In XUL wird ein spezielles XUL-Element erstellt.

In anderen Dokumenten wird ein leerer URI-Namespace erstellt.

Syntax BEARBEITEN

history.pushState(state, title, url);

Beispiel BEARBEITEN

Erstellt ein neuer Browserverlauf, der nach Status, Titel und URL festgelegt wird.

JavaScript

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';var url = 'hello-world.html';
history.pushState(state, title, url);

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. js中的window.history的用法（一）

3. js中的window.history的用法（二）

4. 深入了解h5中history特性--pushState、replaceState

5. h5中History API 对Web应用的影响

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Anwendungsbeispiele von History.pushState() in h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!