Ausführliche Erkundung der Tutorial-Techniken der History API_html5 von HTML5

Wenn Ihr Browser die History API nicht unterstützt, können Sie stattdessen History.js verwenden.
Verlauf verwenden

HTML 5 bietet zwei neue Methoden:

1. History.pushState(); 2. History.replaceState();

Mit beiden Methoden können wir den Verlauf hinzufügen und aktualisieren, sie funktionieren gleich und können die gleiche Anzahl von Parametern hinzufügen. Neben Methoden gibt es auch das Popstate-Ereignis. Im folgenden Artikel stellen wir vor, wie und wann das Popstate-Ereignis verwendet wird.

Die Parameter von pushState() und replaceState() sind gleich und die Parameterbeschreibung lautet wie folgt:

1. state: speichert die JSON-Zeichenfolge, die im Popstate-Ereignis verwendet werden kann.

2. Titel: Die meisten Browser unterstützen diesen Parameter derzeit nicht oder ignorieren ihn. Am besten verwenden Sie stattdessen null

3. URL: Jede gültige URL, die zum Aktualisieren der Adressleiste des Browsers verwendet wird, unabhängig davon, ob die URL bereits in der Adressliste vorhanden ist. Darüber hinaus wird die Seite nicht neu geladen.

Der Hauptunterschied zwischen den beiden Methoden besteht darin, dass pushState() einen neuen Eintrag zum Verlaufsstapel hinzufügt und replaceState() den aktuellen Datensatzwert ersetzt. Wenn Sie darüber immer noch verwirrt sind, veranschaulichen Sie den Unterschied anhand einiger Beispiele.

Angenommen, wir haben zwei Stapelblöcke, einen mit der Bezeichnung 1 und den anderen mit der Bezeichnung 2, und Sie haben einen dritten Stapelblock mit der Bezeichnung 3. Wenn pushState() ausgeführt wird, wird Stapelblock 3 zum vorhandenen Stapel hinzugefügt, sodass der Stapel über 3 Blockstapel verfügt.

Wenn im gleichen hypothetischen Szenario replaceState() ausgeführt wird, wird Block 3 auf dem Stapel von Block 2 platziert. Daher bleibt die Anzahl der Verlaufsdatensätze unverändert, d. h. pushState() erhöht die Anzahl der Verlaufsdatensätze um 1.

Die Vergleichsergebnisse lauten wie folgt:

Um den Verlauf des Browsers zu steuern, haben wir an dieser Stelle die Ereignisse pushState() und replaceState() ignoriert. Aber vorausgesetzt, der Browser zählt viele fehlerhafte Datensätze, wird der Benutzer möglicherweise auf diese Seiten umgeleitet oder auch nicht. In diesem Fall treten unerwartete Probleme auf, wenn Benutzer die Vorwärts- und Zurück-Navigationsschaltflächen des Browsers verwenden.

Wenn wir jedoch pushState() und replaceState() zur Verarbeitung verwenden, erwarten wir, dass das Popstate-Ereignis ausgelöst wird. Aber in Wirklichkeit ist dies nicht der Fall. Wenn Sie stattdessen den Sitzungsverlauf durchsuchen, unabhängig davon, ob Sie auf die Schaltflächen „Vorwärts“ oder „Zurück“ klicken oder die Methoden „history.go“ und „history.back“ verwenden, wird „popstate“ ausgelöst.

　In WebKit-Browsern würde ein Popstate-Ereignis nach dem Onload-Ereignis des Dokuments ausgelöst, Firefox und IE weisen dieses Verhalten jedoch nicht auf.
Demo-Beispiel

HTML:

JavaScript:

　　总结(ps:喜欢这两个字~~~^_^~~~)

　　HTML 5中的History API 对Web应用有着很大的影响.为了更容易的创建有效率的、对SEO友好的单页面应用，它移除了对散列值的依赖.