Methoden für pushstate und popstate zum Betreiben von URLs

Dieses Mal erkläre ich Ihnen, wie Sie Pushstate- und Popstate-URLs bedienen Vorsichtsmaßnahmen Hier sind praktische Fälle.

1. Verstehen von window.history

window.history stellt den Verlauf des Fensterobjekts dar, das initiiert wird vom Benutzer Erzeugt und akzeptiert globale Objekte, die von Javascript-Skripten gesteuert werden. Das Fensterobjekt bietet Zugriff auf den Browserverlauf über das Verlaufsobjekt. Es stellt einige sehr nützliche Methoden und Eigenschaften bereit, die es Ihnen ermöglichen, sich im Verlauf frei vorwärts und rückwärts zu bewegen.

1. Vorwärts und rückwärts im Verlauf

Um im Verlauf zurückzugehen, können Sie Folgendes tun:

window.history.back();

Das ist wie beim Benutzer Klicken Sie auf das Gleiche wie auf die Zurück-Schaltfläche des Browsers.

Ähnlich können Sie vorwärts gehen, indem Sie einfach auf die Schaltfläche „Vorwärts“ im Browser klicken:

 window.history.forward();

2. Gehen Sie zum angegebenen Verlaufspunkt

Sie können die Methode go() verwenden, um eine Seite aus dem Verlauf der aktuellen Sitzung zu laden, indem Sie einen Wert relativ zur aktuellen Seitenposition angeben (aktueller SeitenpositionIndexWert ist 0, vorherige Seite Das ist -1, und die nächste Seite ist 1).

Um eine Seite zurückzugehen (entspricht dem Aufruf von back()):

 window.history.go(-1);

Um eine Seite vorwärts zu gehen (entspricht dem Aufruf von forward()):

window.history.go(1);

In ähnlicher Weise können Sie durch Übergeben des Parameters „2“ um 2 Rekordpunkte vorwärts gehen. Sie können den Längenattributwert überprüfen, um herauszufinden, wie viele Aufzeichnungspunkte es im Verlaufsstapel gibt:

window.history.length;

2. Ändern Sie die Verlaufsaufzeichnungspunkte

Die neue API von HTML5 erweitert window.history und macht Verlaufspunkte offener. Sie können den aktuellen historischen Aufzeichnungspunkt speichern, den aktuellen historischen Aufzeichnungspunkt ersetzen und den historischen Aufzeichnungspunkt überwachen. Im Folgenden finden Sie eine kurze Beschreibung jedes einzelnen.

1. Speichern Sie den aktuellen Verlaufspunkt

Die Speichermethode ähnelt dem Push des Arrays (Array.push()), fügen Sie im Fenster einen neuen hinzu .history Historische Aufzeichnungspunkte, zum Beispiel:

// 当前的url为：http://qianduanblog.com/index.html
var json={time:new Date().getTime()};
// @状态对象：记录历史记录点的额外对象，可以为空
// @页面标题：目前所有浏览器都不支持
// @可选的url：浏览器不会检查url是否存在，只改变url，url必须同域，不能跨域
window.history.pushState(json,"","http://qianduanblog.com/post-1.html");

Nach der Ausführung der pushState-Methode lautet die URL-Adresse der Seite http://qianduanblog.com/post-1.html.

2. Ersetzen Sie den aktuellen Verlaufspunkt

window.history.replaceState ähnelt window.history.pushState, der Unterschied besteht darin, dass sich replaceState nicht im Fenster befindet. Verlauf Der Effekt des Hinzufügens eines neuen historischen Aufzeichnungspunkts ähnelt dem von window.location.replace(url), bei dem kein neuer Aufzeichnungspunkt zum historischen Aufzeichnungspunkt hinzugefügt wird. Die Methode „replaceState()“ ist besonders geeignet, wenn Sie das Statusobjekt oder die URL des aktuellen Verlaufseintrags als Reaktion auf eine Benutzeraktion aktualisieren möchten.

3. Überwachungsverlaufsaufzeichnungspunkte

Überwachungsverlaufsaufzeichnungspunkte können intuitiv als Überwachungs-URL-Änderungen betrachtet werden, der Hash-Teil der URL wird jedoch ignoriert Hash-Teil: HTML5 verfügt über eine neue API namens onhashchange. Diese Methode und browserübergreifende kompatible Lösungen werden auch in meinem Blog erwähnt. Sie können window.onpopstate verwenden, um Änderungen in der URL zu überwachen und das am historischen Aufzeichnungspunkt gespeicherte Statusobjekt abzurufen, bei dem es sich um das oben erwähnte JSON-Objekt handelt, z. B.:

// 当前的url为：http://qianduanblog.com/post-1.html
window.onpopstate=function()
{
    // 获得存储在该历史记录点的json对象
    var json=window.history.state;
    // 点击一次回退到：http://qianduanblog.com/index.html
    // 获得的json为null
    // 再点击一次前进到：http://qianduanblog.com/post-1.html
    // 获得json为{time:1369647895656}
}

Es ist erwähnenswert: Das onpopstate-Ereignis wird nicht ausgelöst, wenn das Javascript-Skript window.history.pushState und window.history.replaceState ausführt.

Zu beachten ist außerdem, dass Google Chrome und Firefox seltsamerweise unterschiedlich reagieren, wenn die Seite zum ersten Mal geöffnet wird, während Firefox dies nicht tut.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So ändern Sie den Code der aktuellen URL ohne Aktualisierung

So verwenden Sie den LocalStorage von H5 lokal Aktualisierungswert speichern

Das obige ist der detaillierte Inhalt vonMethoden für pushstate und popstate zum Betreiben von URLs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!