Detaillierte Erläuterung des Pushstate- und Popstate-Vorgangsverlaufs von HTML5, ohne das aktuelle URL-Codebeispiel zu aktualisieren und zu ändern

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 in der Geschichte

Um in der Geschichte zurückzugehen, können Sie Folgendes tun:

window.history.back();

Das ist, als würde der Benutzer auf die Zurück-

-Schaltfläche des Browsers klicken.

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

 window.history.forward();

2. Verschieben Zu einem angegebenen Verlaufspunkt

Durch Angabe eines Werts relativ zur aktuellen Seitenposition können Sie mit der Methode go() eine Seite aus dem Verlauf der aktuellen Sitzung laden (aktueller Seitenposition

Index). Der Wert ist 0, die vorherige Seite ist -1 und die nächste Seite ist 1).

Um eine Seite zurück zu gehen (entspricht dem Aufruf von „back()“):

 window.history.go(-1);

Eine Seite nach vorne gehen (entspricht dem Aufruf von „forward()“) :

window.history.go(1);

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

window.history.length;

2. Ändern Sie den Verlaufsdatensatz Punkte

HTML5s neue

API 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 historischen Datensatzpunkt

wird auf ähnliche Weise gespeichert wie das Schieben von

Array auf den Stapel ( Array.push()), fügen Sie einen Verlaufsaufzeichnungspunkt in window.history hinzu, zum Beispiel:

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

// 当前的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");

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.:

Es ist erwähnenswert, dass das onpopstate

// 当前的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}
}

-Ereignis

nicht ausgelöst wird, 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 Erläuterung des Pushstate- und Popstate-Vorgangsverlaufs von HTML5, ohne das aktuelle URL-Codebeispiel zu aktualisieren und zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!