HTML5-Verlaufs-API

Ich muss das Google Chrome-Team dafür bewundern, dass es HTML5 und CSS3 verwendet hat, um ein sehr schönes Online-E-Book zu implementieren: „20 Dinge über Browser und das Internet“.

Zugangsadresse: http://www.20thingsilearned.com

Es ist lange her, dass dieses E-Book veröffentlicht wurde, aber ich mag es immer noch, nachdem ich es heute gelesen habe. Wir können E-Book-Seiten hin- und herwechseln, ohne die Seite zu aktualisieren, was die perfekte Verkörperung von OPOA (One Page One Application) ist.

Ich lerne gerade etwas über die History-API, daher interessiert mich besonders, wie sie window.history.pushState() und window.history.replaceState() verwenden, um zwischen Seiten zu wechseln, ohne sie zu aktualisieren.

Ich habe heute einige Informationen überprüft und habe grundsätzlich ein grundlegendes Verständnis der Verlaufs-API.

Das Erste, was ich sagen muss, ist, dass Geschichte eine globale Situation ist, also window.history. Sie müssen mit diesem Variablennamen vertraut sein, da Sie den JavaScript-Code oft sehen können, indem Sie window.history.back() oder window.history.go(-1) verwenden, um zur vorherigen Seite zurückzukehren.

Historie ist also keine neue Sache. Im Zeitalter von HTML4 können wir diese Attribute und Methoden verwenden:

Länge: die Anzahl der Datensätze im Verlaufsstapel.

back(): Zurück zur vorherigen Seite.

forward(): Weiter zur nächsten Seite.

go([delta]): Wenn es nicht geschrieben ist oder 0 ist, wird diese Seite aktualisiert, wenn es sich um eine positive Zahl handelt Ist eine negative Zahl, wird auf die entsprechende Seitenzahl zurückgegriffen.

Jetzt fügt HTML5 die folgenden zwei Methoden hinzu:

pushState(data, title [, url]): Fügen Sie einen Datensatz oben im Verlaufsstapel hinzu. data ist ein Objekt oder null, das als Statusattribut des Parameters übergeben wird, wenn das Popstate-Ereignis des Fensters (window.onpopstate) ausgelöst wird; title ist der Titel der Seite, aber alle aktuellen Browser ignorieren diesen Parameter Die URL der Seite. Wenn sie nicht angegeben wird, handelt es sich um die aktuelle Seite.

replaceState(data, title [, url]): Ändert den Verlauf der aktuellen Seite. Die Parameter sind die gleichen wie oben. Durch diese Änderung wird nicht auf die URL zugegriffen. Derzeit wird es jedoch nur von Safari 5.0, Chrome 8.0, Firefox 4.0 und iOS 4.2.1 unterstützt. Wenn Sie mit alten Browsern kompatibel sein möchten, können Sie History.js ausprobieren, das auch einige Fehler behebt.

Natürlich können wir auf mobilen Plattformen mutig die History-API von HTML5 ausprobieren. Die integrierten Browser der iOS3.0- und Android2.0-Plattformen eignen sich perfekt für den Verlauf. Mit ihnen können wir Web-Apps eher wie native Apps gestalten.

Nachfolgend empfehle ich einige Artikel:

.Manipulation des Browserverlaufs

.Sitzungsverlauf und Navigation

.Manipulation des Verlaufs für Spaß und Profit