Eingeführt seit Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5 führt zwei Methoden ein, histtory.pushState() und history.replaceState(), die das Hinzufügen und Ändern von History-Entitäten ermöglichen. Gleichzeitig funktionieren diese Methoden mit dem window.onpostate-Ereignis.
Ändern Sie den Referrer mit der Methode history.pushState(), die im HTTP-Header verwendet werden kann, der für das xmlhttpRequest-Objekt erstellt wurde, nachdem der Zustand geändert wurde. Dieser Referrer ist die URL des Dokuments, als die XMLHttpRequest erstellt wurde.
pushState wird verwendet, um einen Datensatz der aktuellen Seite zum Verlauf hinzuzufügen, während replaceState und pushState exakt gleich verwendet werden, der einzige Unterschied ist, dass sie verwendet werden, um den Datensatz der aktuellen Seite im Verlauf zu verändern.
Beispiel
Angenommen http://mozilla.org/foo.html Seite führt JS aus
var stateObj = { foo: "bar" }; history.pushState (stateObj, "Seite 2", "bar.html");
Diese Methode lässt die URL-Adressleiste http://mozilla.org/bar.html anzeigen,Aber der Browser lädt bar.html Seite nicht, selbst wenn sie existiert。
Nehmen wir nun wieder an, dass der Nutzer weiterhin auf die http://google.com zugreift und zurückklickt. Zu diesem Zeitpunkt erhält die URL-Adressleiste http://mozilla.org/bar.html die Seite ein popstate-Event (chrome), das eine Kopie von stateObj enthält. Diese Seite sieht aus wie foo.html. +
An diesem Punkt klicken wir wieder zurück, und die URL wechselt http://mozilla.org/foo.html,document erhält ein weiteres Popstate-Ereignis und ein Null-State-Objekt. Diese Rückgabeaktion ändert den Inhalt des Dokuments nicht. (Vielleicht versucht es nach einer Weile zu laden...) Chrom)
pushState-Methode
pushState() hat drei Parameter: Zustandsobjekt, Titel (jetzt ignoriert, nicht mehr verarbeitet), URL (optional). Einzelheiten:
· Zustandsobjekt – Das Zustandsobjekt ist ein Javascrip{filter}t-Objekt, das sich auf eine neue Historienentität bezieht, die durch die pushState()-Methode erstellt wurde. Wird verwendet, um Informationen über die Einträge zu speichern, die du in die Historie einfügen möchtest. Das Zustandsobjekt kann eine beliebige Json-Zeichenkette sein. Da Firefox die Festplatte des Benutzers nutzt, um auf das Zustandsobjekt zuzugreifen, beträgt der maximale Speicherplatz dieses Objekts 640k. Ist er größer als dieser Wert, wirft die pushState()-Methode eine Ausnahme. Wenn du mehr Speicherplatz zum Lagern brauchst, nutze lokale Aufbewahrung.
· Titel—Firefox ignoriert diesen Parameter jetzt, obwohl er in Zukunft möglicherweise verwendet wird. Der sicherste Weg, es jetzt zu verwenden, ist, eine leere Zeichenkette weiterzugeben, um zukünftige Änderungen zu verhindern. Oder Sie können einen kurzen Titel weitergeben, um den Bundesstaat anzuzeigen
· URL – Dieser Parameter wird verwendet, um die URL der neuen History-Entität weiterzugeben; beachten Sie, dass der Browser diese URL nach dem Aufruf der pushState()-Methode nicht mehr lädt. Aber vielleicht versucht es nach einer Weile, diese URL zu laden. Zum Beispiel kann nach dem Neustart des Browsers die neue URL kein absoluter Pfad sein. Wenn es ein relativer Pfad ist, dann ist er relativ zur bestehenden URL. Die neue URL muss Co-Domain mit der bestehenden URL sein, sonst wirft pushState() eine Ausnahme. Dieser Parameter ist optional und, wenn er leer ist, wird er als aktuelle URL des Dokuments angegeben.
In gewisser Weise ist das Aufrufen der pushState()-Methode ähnlich wie window.locatio{filter}n = "#foo", wobei beide eine weitere mit dem aktuellen Dokument zugeordnete Historienentität erstellen und aktivieren, aber pushState() hat einige zusätzliche Vorteile:
Die neue URL kann jede URL sein, die sich in derselben Domain wie die aktuelle URL befindet, im Gegensatz dazu, dass window.locatio{filter}n im selben Dokument bleibt, wenn nur ein Hash gesetzt ist.
Du kannst die URL unverändert lassen, wenn du das nicht brauchst. Zum Vergleich setze window.locatio{filter}n = "#foo"; Es werden nur neue Historienentitäten generiert, wenn dein aktueller Hash nicht #foo
Du kannst beliebige Daten mit deiner neuen Versionsentität verknüpfen. Bei einem hashbasierten Ansatz müssen alle relevanten Daten in eine kurze Zeichenkette kodiert werden.
Beachte, dass die pushState()-Methode die Hashchange-Zeit nicht ausführt, selbst wenn die alten und neuen URLs einfach unterschiedliche Hashes sind.
replaceState()-Methode
history.replaceState() wird ähnlich wie pushState() verwendet, nur dass replaceState() verwendet wird, um die aktuelle Historien-Entität zu ändern, anstatt eine neue zu erstellen. Diese Methode kann manchmal nützlich sein, wenn Sie ein Zustandsobjekt oder die aktuelle Historien-Entität als Reaktion auf bestimmtes Benutzerverhalten aktualisieren müssen, und Sie können sie nutzen, um die URL des Zustandsobjekts oder der aktuellen Geschichts-Entität zu aktualisieren.
PopState-Veranstaltung
Wenn die historische Entität geändert wird, tritt das Popstate-Ereignis auf. Wenn die Historik-Entität von den Methoden pushState und replaceState generiert wird, enthält das Zustandsattribut des popstate-Ereignisses eine Kopie des Zustandsobjekts aus der Geschichts-Entität
Details finden Sie unter window.onpopstate
Lesen Sie den aktuellen Zustand
Lesen Sie den bestehenden Zustand
Wenn die Seite lädt, kann sie ein nicht-leeres Zustandsobjekt haben. Dies kann passieren, wenn die Seite ein Zustandsobjekt (mit pushState oder replaceState) setzt und der Benutzer den Browser neu startet. Wenn die Seite neu geladen wird, erhält sie ein Onload-Event, aber es gibt kein PopState-Event. Wenn du jedoch die history.state-Eigenschaft liest, erhältst du dieses State-Objekt, nachdem das popstate-Event eingetreten ist
History.pushState()-Dokumentation: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
Der Parameter der empfangenden URL hat eine Typfolge, die verwendet wird, um die URL der aktuellen Adressleiste zu ändern. Eine Sache zu beachten ist, dass dieser Parameter nicht identisch mit Cross-Domain sein kann, das heißt, Protokoll, Domainname und Port müssen identisch sein.
Uncaught DOMException: Fehlgeschlagen, 'pushState' unter 'History' auszuführen: Ein Historien-State-Objekt mit URL 'http://www.test.com/' kann in einem Dokument mit Ursprung ' nicht erstellt werden https://www.itsvse.com' und URL 'https://www.itsvse.com/'.
bei <anonymous>:1:9
Korrekter Code:
|
Veröffentlicht am 12.09.2017 13:55:04
|
|
|
|
Veröffentlicht am 27.10.2017 09:51:10