Detaillierte Einführung in den Pushstate- und Popstate-Vorgangsverlauf von HTML5 zum Ändern der aktuellen URL ohne Aktualisierung

In diesem Artikel wird hauptsächlich der Pushstate- und Popstate-Vorgangsverlauf von HTML5 vorgestellt, und die relevanten Informationen zum Ändern der aktuellen URL ohne Aktualisierung können sich auf

1. window.history verstehen

window.history stellt den Verlauf des

Fensterobjekts dar, das aktiv vom Benutzer generiert wird und Javascript akzeptiert Skripte steuern das globale Objekt. 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 Das Klicken auf die Zurück-Schaltfläche

des Browsers ist dasselbe.

Ä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 Seitenposition

IndexWert 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

HTML5s neue

API erweitert window.history und macht den Verlaufsaufzeichnungspunkt 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 historischen Datensatzpunkt

auf ähnliche Weise, als würden Sie das

Array auf den Stapel schieben (). Array.push()), Fügen Sie einen Verlaufsaufzeichnungspunkt in window.history hinzu, 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 dem Ausführen der pushState-Methode die URL-Adresse der Seite ist qianduanblog.com /post-1.html.

2. Ersetzen Sie den aktuellen Verlaufspunkt

window.history.replaceState ähnelt window.history.pushState, der Unterschied besteht darin, dass replaceState nicht vorhanden ist im Fenster Die Wirkung des Hinzufügens eines neuen historischen Aufzeichnungspunkts in .history ist ähnlich wie bei window.location.replace(url), wodurch 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. Überwachung historischer Aufzeichnungspunkte

Die Überwachung historischer Aufzeichnungspunkte kann intuitiv als Überwachung von URL-Änderungen betrachtet werden, die URL

wird jedoch ignoriert Teil überwacht den Hash-Teil der URL. In meinem Blog wird auch über diese Methode und browserübergreifende kompatible Lösungen gesprochen. 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.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in den Pushstate- und Popstate-Vorgangsverlauf von HTML5 zum Ändern der aktuellen URL ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!