JavaScript-Verlaufsobjekt erklärt

Vorwort:

Wenn wir eine Webseite durchsuchen, achten wir möglicherweise nicht besonders auf die Vorgänge beim Vorwärts- und Rückwärtsspringen. Haben Sie jedoch bei der Entwicklung jemals darüber nachgedacht, was passiert, wenn Sie zwischen Seiten springen, wie der Browser Seiteninformationen speichert und ob Sie die Seite neu laden müssen, wenn Sie zur vorherigen Seite zurückkehren? Es wird viele Fragen geben. Um diese Probleme zu lösen, müssen Sie zunächst das history unter window im Browser kennen. In diesem Artikel werden die relevanten Wissenspunkte dieses Objekts ausführlich zusammengefasst.

history Verlaufsobjekt stellt den Navigationsverlauf des Benutzers seit der ersten Verwendung des aktuellen Fensters dar. Da history eine Eigenschaft von window ist, verfügt jedes window über sein eigenes history . Aus Sicherheitsgründen gibt dieses Objekt nicht die URLs preis, die der Benutzer besucht hat, aber es ermöglicht Ihnen, vorwärts und rückwärts zu gehen, ohne die tatsächliche URL zu kennen.

1. Routennavigation

history.go() navigiert in jede Richtung durch den Verlauf des Benutzers, entweder vorwärts oder rückwärts. Diese Methode akzeptiert nur einen Parameter, der eine Ganzzahl sein kann, die angibt, wie viele Schritte vorwärts oder rückwärts gegangen werden soll.

 history.go(-1);// Eine Seite zurückgehenhistory.go(1);// Eine Seite vorgehenhistory.go(2);// Zwei Seiten vorgehen//

go() hat zwei Kurzmethoden: back() und forward().

history.back(); // Eine Seite zurückgehen history.forward(); // Eine Seite vorgehen

Das history hat auch ein length . history.length == 1 bedeutet, dass dies die erste Seite im Benutzerfenster ist.

Die Go-Methode, back Methode, forword -Methode und die Vorwärts- und Zurück-Schaltflächen des Benutzerhandbuchs im Browser histroy , dass die Seite aktualisiert und gesprungen wird.

2. API zur Verwaltung des Verlaufsstatus

(1) Hash-Change-Ereignis

hashchange：history ist hashchange , das ausgelöst wird, wenn sich der Hash der Seiten-URL ändert, und Entwickler können zu diesem Zeitpunkt bestimmte Vorgänge ausführen. Das hashchange -Ereignis wird ausgelöst, wenn sich die Fragmentkennung einer URL ändert (der Teil der URL nach dem #-Zeichen, einschließlich des #-Zeichens). Mithilfe der State-Management-API können Entwickler die Browser-URL ändern, ohne eine neue Seite zu laden.

Beispiel: Mit den Methoden pushState und replaceState wird die Seite nicht aktualisiert, aber die Route ändert sich.

(2) Popstate-Ereignis

Wenn sich der aktive Verlaufseintrag ändert, wird ein popstate -Ereignis ausgelöst. Wenn der aktivierte Verlaufseintrag durch einen Aufruf von history.pushState （） erstellt oder durch einen Aufruf von history.replaceState（） beeinflusst wurde, enthält die State-Eigenschaft des Popstate-Ereignisses eine Kopie des State-Objekts des Verlaufseintrags. Beachten Sie, dass der Aufruf von history.pushState() oder history.replaceState() kein popstate -Ereignis auslöst. Dieses Ereignis wird nur ausgelöst, wenn eine Browseraktion ausgeführt wird, z. B. wenn der Benutzer auf die Zurück-Schaltfläche des Browsers klickt (oder im Javascript -Code history.back() oder history.forward() aufruft).

(3) Methode history.pushState()

pushState() fügt dem Verlaufsstapel der aktuellen Browser-Sitzung einen Status hinzu. Diese Methode empfängt drei Parameter: ein Statusobjekt, einen Titel für den neuen Status und eine (optionale) relative URL. Nachdem pushState() ausgeführt wurde, werden die Statusinformationen in den Verlaufsdatensatz übertragen und die Adressleiste des Browsers ändert sich, um die neue relative URL anzuzeigen. Die URL-Leiste zeigt die neue Adresse an, lädt aber die Seite nicht und prüft nicht einmal, ob die Seite existiert. Diese Methode erhöht history.length

(4) Methode history.replaceState()

replaceState() ändert den aktuellen Verlaufseintrag. Diese Methode empfängt drei Parameter: ein state , einen Titel für den neuen Status und eine (optionale) relative URL. Nachdem r Methode eplaceState() ausgeführt wurde, wird das aktuelle state oder die URL der aktuellen Verlaufsentität aktualisiert, um auf die Aktion des Benutzers zu reagieren. In der URL-Leiste wird die neue Adresse angezeigt, aber die Seite wird nicht geladen oder es wird nicht einmal überprüft, ob die Seite existiert. Diese Methode erhöht history.length nicht.

<Text>
  <button onclick="handleNext()">Klicken Sie mich zur nächsten Seite</button><br>
  <button onclick="handleLast()">Klicken Sie hier, um zur vorherigen Seite zu gelangen</button><br>
  <Skript>
    fenster.onload = Funktion () {
      Konsole.log(Fenster.Verlauf);
    }
    window.addEventListener('hashchange', Funktion () {
      console.log('Der Hash hat sich geändert!')
    }, FALSCH);
    window.addEventListener('popstate', (Ereignis) => {
      console.log("Standort: " + Dokument.Standort + ", Status: " + JSON.stringify(Ereignis.Status));
    });
    Funktion handleNext() {
      const state = { Benutzer-ID: "1234", Seite: "2" }
      const title = "Zwei"
      const url = "seite2.html"
      window.history.pushState(Status, Titel, URL)
      Konsole.log(Fenster.Verlauf);
    }
    Funktion handleLast() {
      const state = { Benutzer-ID: "1234", Seite: "21" }
      Konstantentitel = "Zwei"
      const url = "seite21.html"
      window.history.replaceState(Staat, Titel, URL)
      Konsole.log(Fenster.Verlauf);
    }
  </Skript>
</body>

Die Ergebnisse sind wie folgt:

3. Ergänzung: URL-Hash

hash der URL ist der Anker (#), der im Wesentlichen href Attribut von window.location ändert. Wir können das href ändern, indem wir location.hash direkt zuweisen, aber die Seite wird nicht aktualisiert.

Wie in der folgenden Abbildung dargestellt:

Letzte Worte:

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des avaScript history Verlaufsobjekts. Weitere Informationen zum Verlaufsobjekt finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!