HTML5 History-API implementiert einen erfrischenden Sprung

Einmal, als ich auf **. Ich habe das Front-End-Wissen überprüft, das ich gelernt habe, und es schien keine Technologie zu geben, um dies zu erreichen. Also suchte ich nach Baidu und fand heraus, dass dies ursprünglich mit der History -API in HTML5 erreicht wurde.

Als ich einmal auf **. Ich habe das Front-End-Wissen überprüft, das ich gelernt habe, und es schien keine Technologie zu geben, die dies erreichen könnte. Deshalb fand ich heraus, dass dies ursprünglich mit der History -API in HTML5 erreicht wurde, aber es ist nie nützlich gewesen. Diese Technologie wurde erst dann angewendet, bis der Blog überarbeitet wurde.

1. Die Funktion des Hinzufügens von Elementen im Browser -Verlauf über JS hinzugefügt.

2. Zeigen Sie die URL in der geänderten Browser -Adressleiste an, ohne die Seite zu aktualisieren.

3.. Es wurde ein Ereignis hinzugefügt, das ausbreitet, wenn der Benutzer die Back -Taste des Browsers klickt.

Durch die oben genannten drei Punkte ist es möglich, die URL in der Browser -Adressleiste dynamisch zu ändern, ohne die Seite zu aktualisieren und den Seiteninhalt dynamisch anzuzeigen.

Zum Beispiel: Wenn der Inhalt von Seite A und Seite B vor HTML5 unterschiedlich ist, müssen Sie, wenn Sie von Seite A nach Seite B wechseln, im Browser von Seite A nach Seite B wechseln oder, wenn Sie eine Button -Funktion #xxxx haben müssen, der URL -Adresse #xxxx hinzufügen können, um die Back -Funktion zu realisieren. Jetzt in HTML5 können Sie die folgende Verarbeitung über die History -API implementieren:

1. Fordern Sie Daten B auf Seite A an, indem Sie eine AJAX -Anfrage senden.

2. Laden Sie die entsprechenden Informationen über JS in Seite A an den entsprechenden Ort.

3.. Wechseln Sie von der URL -Adresse von Seite A zur URL -Adresse von Seite B in der Adressleiste des Browsers über die Historie -API, ohne die Seite zu aktualisieren.

1. Längen Sie die Anzahl der Begriffe in der Geschichte. Die Geschichte, die JavaScript verwalten kann, beschränkt sich auf den Bereich, der mit den Vorwärts- und Rückschlüssel des Browsers erreicht werden kann. Diese Eigenschaft gibt die Summe der Adresse zurück, die unter den beiden Vorwärts- und Rückschaltflächen enthalten ist.

1. zurück () zurück, was dem Drücken der Rücktaste entspricht.

2. Vorwärts () gehen Sie vorwärts dem Drücken der Vorwärts -Taste.

3.go () Verwendung: history.go (x); Gehen Sie in die angegebene Adresse im Rahmen des Verlaufs. Wenn x <0, dann zurück x Adressen, wenn x> 0, dann X -Adressen weiterleiten, wenn x == 0, dann die jetzt geöffnete Seite aktualisieren. History.go (0) entspricht der Position.reload ().

1. History.Pushstate (Daten, Titel [, url]): Fügen Sie einen Datensatz zum oberen Rand des Verlaufsstapels hinzu; Daten werden als Parameter übergeben, wenn das OnPopstate -Ereignis ausgelöst wird. Der Titel ist der Seitentitel, und alle aktuellen Browser ignorieren diesen Parameter. URL ist die Seitenadresse, optional, und die Standardeinstellung ist die aktuelle Seitenadresse.

2. History.Replacestate (Daten, Titel [, url]): Ändern Sie die aktuelle Geschichte, die Parameter sind die gleichen wie oben.

A. history.state: Wird verwendet, um Daten der oben genannten Methoden zu speichern. Die Les- und Schreibberechtigungen verschiedener Browser sind unterschiedlich.

4. PopState -Ereignis: Dieses Ereignis wird ausgelöst, wenn der Benutzer die Schaltfläche "Zurück oder Vorwärts" des Browsers klickt. Der staatliche Eigenschaftswert des Ereignisobjekts, das das Ereignis auslöst, wird in der Ereignisbearbeitungsfunktion gelesen. Dieser Eigenschaftswert ist der erste Parameterwert, der bei der Ausführung der PushState -Methode verwendet wird und das das Objekt speichert, das dem Browser -Verlauf synchron hinzugefügt wird.

Bisher unterstützt der Browser die History -API in HTML5 von IE10, Firefox4 oder höher, Chrom 8 oder höher, Safari5 oder höher.