Nutzungsanalyse von pushState und replaceState in H5-H5-Tutorial-php.cn

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von pushState und replaceState in H5 vorgestellt. Der Inhalt ist jetzt recht gut und dient als Referenz.

1. Einführung

HTML5 führt die Methoden „history.pushState()“ und „history.replaceState()“ ein, die hinzugefügt werden können bzw. Änderungshistorieneinträge. Diese Methoden werden normalerweise in Verbindung mit window.onpopstate verwendet.

2. Beispiel der pushState()-Methode

Angenommen, das folgende JavaScript wird in http://mozilla.org/foo ausgeführt. html-Code:

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

Nach dem Login kopieren

Dies führt dazu, dass in der Adressleiste des Browsers http://mozilla.org/bar.html angezeigt wird, der Browser jedoch nicht bar.html lädt oder überprüft, ob bar.html vorhanden ist existieren.

Angenommen, der Nutzer besucht jetzt http://google.com und klickt auf die Schaltfläche „Zurück“. Zu diesem Zeitpunkt wird in der Adressleiste http://mozilla.org/bar.html angezeigt und die Seite löst das Popstate-Ereignis aus. Das Ereignisobjekt state enthält eine Kopie von stateObj. Die Seite selbst ist dieselbe wie foo.html, ihr Inhalt kann jedoch im Popstate-Ereignis geändert werden.

Wenn wir erneut auf die Schaltfläche „Zurück“ klicken, ändert sich die Seiten-URL in http://mozilla.org/foo.html und das Dokumentobjekt „document“ löst ein weiteres Popstate-Ereignis aus. Diesmal das Ereignisobjekt „State Object“. ist null. Auch hier ändert sich durch die Rückgabe nicht der Inhalt des Dokuments. Obwohl sich der Inhalt des Dokuments beim Empfang des Popstate-Ereignisses ändern kann, stimmt sein Inhalt weiterhin mit der vorherigen Präsentation überein.

3. pushState()-Methode

pushState() erfordert drei Parameter: ein Statusobjekt, einen Titel (derzeit verwendet Ignorieren). ) und (optional) eine URL. Lassen Sie uns die Details dieser drei Parameter erklären:

Statusobjekt – Das Statusobjekt „state“ ist ein JavaScript-Objekt, das über den pushState()-Eintrag einen neuen Verlaufsdatensatz erstellt. Immer wenn der Benutzer zu einem neuen Status navigiert, wird das Popstate-Ereignis ausgelöst und die Statuseigenschaft des Ereignisses enthält eine Kopie des Statusobjekts des Verlaufseintrags.

Titel – Dieser Parameter wird derzeit ignoriert, kann aber in Zukunft verwendet werden. Die Übergabe einer leeren Zeichenfolge ist hier sicher, in Zukunft jedoch unsicher. Alternativ können Sie einen Kurztitel für den Sprungzustand übergeben.

URL – Dieser Parameter definiert den neuen historischen URL-Datensatz. Beachten Sie, dass der Browser diese URL nicht sofort nach dem Aufruf von pushState() lädt, sondern dass er diese URL unter bestimmten Umständen später laden kann, beispielsweise wenn der Benutzer den Browser erneut öffnet. Die neue URL muss kein absoluter Pfad sein. Wenn die neue URL ein relativer Pfad ist, wird sie als relativ zur aktuellen URL behandelt. Die neue URL muss denselben Ursprung haben wie die aktuelle URL, sonst löst pushState() eine Ausnahme aus. Dieser Parameter ist optional und standardmäßig auf die aktuelle URL eingestellt.

4. Der Unterschied zwischen der pushState()-Methode und dem Festlegen des Hashwerts

In gewisser Weise der Aufruf von pushState() und das Festlegen des Speicherorts = „#foo“ ist ähnlich, beide erstellen und aktivieren einen neuen Verlaufseintrag auf der aktuellen Seite. Aber pushState() hat folgende Vorteile:

Die neue URL kann jede URL sein, die denselben Ursprung wie die aktuelle URL hat. Und wenn Sie window.location festlegen, bleibt dieselbe Datei nur dann erhalten, wenn Sie nur den Hash geändert haben.

Bei Bedarf können Sie einen Verlaufseintrag erstellen, ohne die URL zu ändern. Durch die Einstellung window.location = "#foo"; wird nur dann ein neues Verlaufselement erstellt, wenn der aktuelle Hash nicht #foo ist.

Wir können beliebige Daten mit neuen Verlaufselementen verknüpfen. Bei der Hashwert-basierten Methode müssen alle relevanten Daten in einen kurzen String kodiert werden.

5. replaceState()-Methode

Die Verwendung von History.replaceState() ist der von History.pushState() sehr ähnlich, der Unterschied besteht darin, dass replaceState( ) das aktuelle Verlaufselement ändert, anstatt ein neues zu erstellen.

6. Popstate-Ereignis

Immer wenn sich der aktive Verlaufseintrag ändert, wird das Popstate-Ereignis auf dem entsprechenden Fensterobjektauslöser angezeigt. Wenn der aktuell aktive Verlaufseintrag durch die Methode „history.pushState()“ erstellt oder durch die Methode „history.replaceState()“ geändert wurde, enthält die Eigenschaft „state“ des Ereignisobjekts „popstate“ eine Kopie des Statusobjekts des Verlaufseintrags.

Wir können den Status auch direkt auf dem History-Objekt abrufen, wie folgt:

var currentState = history.state;

Nach dem Login kopieren

Es ist zu beachten, dass der Aufruf von History.pushState() oder History.replaceState() den Popstate nicht auslöst Ereignis. Das Opstate-Ereignis wird nur bei bestimmten Aktionen des Browsers ausgelöst, z. B. beim Klicken auf die Schaltflächen „Zurück“ und „Vorwärts“ (oder beim Aufrufen der Methoden „history.back()“, „history.forward()“ und „history.go()“ in JavaScript).

7. Beispiel für ein Popstate-Ereignis

Wenn die aktuelle Webseitenadresse http://example.com/example.html lautet, führen Sie es aus Folgendes Nach dem obigen Code:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

Nach dem Login kopieren

8. Der Zweck von pushState()

王二使用 pushState() 主要是它可以监听到浏览器上的返回事件，这在移动端上也同样适用，参考如下一段代码(可以直接运行）：

<body>
    <p>window.onpopstate可以监听到返回键事件</p>
    <script>
        history.pushState({}, ""); 
        window.onpopstate = function(event) {
            //这里可以监听到浏览器的返回事件，并做你想做的事情，
            //例如：跳转到另一个网页
            location.href = "https://www.baidu.com";
        };
    </script>
</body>

Nach dem Login kopieren

当然，用 window.onhashchange 也可以监听到浏览器上的返回事件，参考如下一段代码(可以直接运行）：

<body>
    <p>window.onhashchange可以监听到返回键事件</p>
    <script>
        setTimeout(()=>{
            location.hash="a"
        },100);
        setTimeout(()=>{
            window.onhashchange = function(event) {
                location.href = "https://www.baidu.com";
            }
        },200);
    </script>
</body>

Nach dem Login kopieren

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！