Detailliertes Verständnis der Verlaufsfunktionen in h5 – pushState, replaceState

Das

window-Objekt in DOM ermöglicht das Lesen des Browserverlaufs über die Methode window.history, sodass Sie den Browserverlauf lesen können, wenn der Benutzer Gehen Sie im Zugriffsverlauf vorwärts und rückwärts.

Ab HTML5 können wir mit der Manipulation dieses Verlaufsstapels beginnen.

1.History

Verwenden Sie back(), forward(), und go() kann im Verlauf des Benutzers vorwärts und rückwärts gehen

Vorwärts und rückwärts

Zurück:

window.history.back();

Diese Methode verhält sich so, als ob der Benutzer auf die Zurück-Taste in der Browser-Symbolleiste geklickt hätte.

Ähnlich kann auch die folgende Methode verwendet werden, um Benutzer-Vorwärtsverhalten zu generieren:

window.history.forward();

An eine bestimmte Position im Verlauf verschieben

Sie können die Methode go() verwenden, um eine bestimmte Seite aus dem Sitzungsverlauf zu laden.

Eine Seite zurück verschieben:

window.history.go(-1);

Eine Seite nach vorne verschieben:

window.history.go(1);

Ebenso können Sie mehrere Seiten vor- oder zurückblättern.

Sie können die Gesamtzahl der Seiten im Verlaufsstapel auch ermitteln, indem Sie die Eigenschaft Länge des Browserverlaufs überprüfen.

var numberOfEntries = window.history.length;

Hinweis:IE unterstützt Support Die Methode go() übergibt den Parameter URL.

2. Verlaufselemente hinzufügen und ändern

von Gecko2Beginnen Sie mit der Einführung (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5 Es werden die beiden Methoden histtory.pushState() und history.replaceState() eingeführt, die das Hinzufügen und Ändern von history-Entitäten ermöglichen. Gleichzeitig funktionieren diese Methoden mit dem Ereignis window.onpostate.

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。

pushState 用于向 history 添加当前页面的记录，而 replaceState 和 pushState 的用法完全一样，唯一的区别就是它用于修改当前页面在 history 中的记录。

例子

假设http://mozilla.org/foo.html页面执行了一下JS

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");

这种方法将会使url地址栏显示http://mozilla.org/bar.html，但浏览器不会加载bar.html页面，即使这个页面存在也不会加载。

现在再次假设用户继续访问http://google.com，然后点击后退。这时，url地址栏将会，http://mozilla.org/bar.html，页面会得到popstate事件（chrome），这个状态对象会包含一个stateObj的copy。这个页面看起来像foo.html。+

Zu diesem Zeitpunkt klicken wir erneut auf „Zurück“. URL wird zu http://mozilla.org/foo.html und Dokument Ruft ein weiteres popstate-Ereignis und ein state-Objekt ab, das null ist. Diese Rückgabeaktion ändert den Inhalt des Dokuments nicht. (Vielleicht versuchen Sie nach einer Weile, ...chrome zu laden)

pushState-Methode

pushState() hat drei Parameter :state Objekt, Titel ( wird jetzt ignoriert und nicht verarbeitet ) , URL (optional ) . Spezifische Details:

·   stateObject – Das Statusobjekt ist ein JavaScript-Objekt, das mit dem durch den pushState erstellten Objekt verknüpft ist ()-Methode Neue Verlaufsentität. Wird zum Speichern von Informationen über den Eintrag verwendet, den Sie in den Verlaufsdatensatz einfügen möchten. Statusobjekt kann ein beliebiger JsonString sein. Da Firefox die Festplatte des Benutzers verwendet, um auf das Statusobjekt zuzugreifen, beträgt der maximale Speicherplatz dieses Objekts 640 KB. Wenn er größer als dieser Zahlenwert ist, löst die Methode pushState() eine Ausnahme aus. Wenn Sie wirklich mehr Speicherplatz benötigen, verwenden Sie lokalen Speicher.

· Titel – Firefox ignoriert diesen Parameter derzeit, obwohl er möglicherweise in Zukunft verwendet wird. Der sicherste Weg, es jetzt zu verwenden, besteht darin, eine leere Zeichenfolge zu übergeben, um zukünftige Änderungen zu verhindern. Oder Sie können einen kurzen Titel übergeben, um Staat

darzustellen

· URL – Dieser Parameter wird verwendet, um die URL der neuen Verlaufsentität zu übergeben Browser wird nicht geladen. Diese URL wird nach dem Aufruf der pushState()-Methode geladen. Aber vielleicht versuchen Sie nach einer Weile, diese URL zu laden. Nachdem der Benutzer beispielsweise den Browser neu gestartet hat, ist die neue URL möglicherweise kein absoluter Pfad. Wenn es sich um einen relativen Pfad handelt, ist er relativ zur vorhandenen URL. Die neue URL muss sich in derselben Domäne befinden wie die vorhandene URL, andernfalls löst pushState() eine Ausnahme aus. Dieser Parameter ist optional. Wenn er leer ist, wird er auf die aktuelle URL des Dokuments gesetzt.

In gewisser Weise ist der Aufruf der Methode pushState() dem Festlegen von window.location = „#foo“ sehr ähnlich.Beide erstellen und aktivieren eine weitere Assoziation zu die history-Entität des aktuellen Dokuments, aber pushState() hat auch einige Vorteile:

l neue URL kann eine beliebige und aktuelle URLURL derselben Domain, wenn Sie dagegen nur Hash festlegen, bleibt window.location gleich Dokument.

l Sie müssen die URL nicht ändern, wenn Sie sie nicht benötigen. Im Gegensatz dazu erzeugt die Einstellung window.location = "#foo"; nur dann neue history-Entitäten, wenn Ihr aktueller Hash nicht #foo ist

l Sie können beliebige Daten mit Ihrer neuen Historie-Entität verknüpfen. Beim Hash-basierten Ansatz müssen alle relevanten Daten in eine kurze Zeichenfolge kodiert werden.

Beachten Sie, dass die Methode pushState() den Hashchange Zeit passiert, auch wenn die alte und die neue URL nur Hash unterschiedlich sind.

replaceState()-Methode

history.replaceState() funktioniert sehr ähnlich wie pushState(), außer dass stattdessen replaceState() verwendet wird, um die aktuelle history-Entität zu ändern von Erstellen Sie ein neues. Diese Methode ist manchmal nützlich, wenn Sie ein Statusobjekt oder die aktuelle Historie-Entität aktualisieren müssen Status-Objekt oder die URL der aktuellen Verlaufs-Entität. popstate-Ereignis

Wenn die

history

-Entität geändert wird, popstate Das Ereignis wird stattfinden. Wenn die Entität history durch die Methoden pushState und replaceState generiert wird, das Attribut state des Ereignisses popstate enthält eine Kopie des Objekts Zustand aus der Entität VerlaufEinzelheiten finden Sie im Fenster

. onpopstate

读取当前的state

当页面加载时，它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载，页面将收到onload事件，但不会有popstate事件。然而，如果你读取history.state属性，将在popstate事件发生后得到这个state对象

var currentState = history.state;

Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

【相关推荐】

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

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

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

4. 详细介绍h5中的history.pushState()使用实例

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

Das obige ist der detaillierte Inhalt vonDetailliertes Verständnis der Verlaufsfunktionen in h5 – pushState, replaceState. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!