js Klicken Sie auf „Zurück', um zur angegebenen Seite zu springen

Diese Funktion wurde bereits kurz vorgestellt. Dieses Mal werde ich das Prinzip und die bestehenden Probleme im Detail erläutern (da es die neue API von HTML5 verwendet, gibt es Kompatibilitätsprobleme. Es wird empfohlen, diese Methode auf mobilen Endgeräten zu verwenden).

Funktionsbeschreibung:

Erstellen Sie eine neue Registerkarte im Browser und geben Sie eine URL an. Nach dem Laden der Webseite ist das Zurückklicken bei normalen Verfahren nicht zulässig. Da für die aktuelle Registerkarte kein relevanter Verlaufsdatensatz vorhanden ist, gibt es auch keinen zurückzugebenden Datensatz.

Auf Wunsch des Kunden muss in diesem Fall ein Link (z. B. die Startseite) zu seinem Verlaufsdatensatz hinzugefügt werden, damit auf der neu geöffneten Seite durch Klicken auf „Zurück“ zur Startseite gesprungen werden kann Der Benutzer kann die verschiedenen Funktionen und die Werbeplattform des Systems sehen.

1. Wichtige Wissenspunkte

HTML5 führt die Methoden „history.pushState()“ und „history.replaceState()“ ein, mit denen Sie Verlaufseinträge einzeln hinzufügen und ändern können. Diese Methoden funktionieren in Verbindung mit dem window.onpopstate-Ereignis.

Fall:
Angenommen, http://mozilla.org/foo.html führt den folgenden JavaScript-Code aus:

Code kopieren Der Code lautet wie folgt:

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

Dies führt dazu, dass in der Adressleiste des Browsers http://mozilla.org/bar.html angezeigt wird, aber weder die Seite bar.html noch die HTML-Überprüfung erfolgt existiert.

Angenommen, der Benutzer navigiert nun zu http://google.com und klickt dann auf die Schaltfläche „Zurück“. Zu diesem Zeitpunkt wird in der Adressleiste http: //mozilla.org/bar.html, und die Seite löst das Popstate-Ereignis aus. Das Statusobjekt in diesem Ereignis enthält eine Kopie von stateObj. Die Seite sieht aus wie foo.html, obwohl der Seiteninhalt möglicherweise im Popstate-Ereignis geändert wurde.

Wenn wir erneut auf die Schaltfläche „Zurück“ klicken, ändert sich die URL wieder zu

http://mozilla.org/foo.html Das Dokument löst dieses Mal ein weiteres Popstate-Ereignis aus denn das Zustandsobjekt ist null. Durch das Zurücksetzen wird der Inhalt des Dokuments ebenfalls nicht geändert.

pushState()-Methode pushState() benötigt drei Parameter: ein Statusobjekt, einen Titel (jetzt ignoriert) und eine optionale URL. Schauen wir uns die Details dieser drei Parameter einzeln an:

Statusobjekt – Ein JavaScript-Objekt, das einem neuen Verlaufseintrag zugeordnet ist, der mit der Methode pushState() erstellt wurde. Immer wenn der Benutzer zu einem neu erstellten Status navigiert, wird das Popstate-Ereignis ausgelöst und die Statuseigenschaft des Ereignisobjekts enthält eine Kopie des Statusobjekts des Verlaufseintrags.

Jedes serialisierbare Objekt kann als Statusobjekt verwendet werden. Da der Firefox-Browser Statusobjekte auf der Festplatte des Benutzers speichert, damit sie nach einem Neustart des Browsers durch den Benutzer wiederhergestellt werden können, begrenzen wir die Größe von Statusobjekten auf 640 KB. Wenn Sie ein Statusobjekt, das diesen Grenzwert überschreitet, an die Methode pushState() übergeben, löst die Methode eine Ausnahme aus. Wenn Sie große Datenmengen speichern müssen, empfiehlt sich die Verwendung von sessionStorage oder localStorage.

Titel – Firefox ignoriert diesen Parameter derzeit, obwohl er möglicherweise in Zukunft verwendet wird. Da diese Methode möglicherweise in Zukunft geändert wird, ist es sicherer, eine leere Zeichenfolge zu übergeben. Alternativ können Sie einen kurzen Titel angeben, der den Staat angibt, in den Sie eintreten möchten.

Adresse (URL) – Die Adresse des neuen Verlaufseintrags. Der Browser lädt die Adresse nach dem Aufruf der pushState()-Methode nicht, versucht jedoch möglicherweise später, sie zu laden, beispielsweise wenn der Benutzer den Browser neu startet. Die neue URL muss kein absoluter Pfad sein. Wenn es sich um einen relativen Pfad handelt, basiert sie auf der aktuellen URL und die aktuelle URL sollte denselben Ursprung haben. Andernfalls löst pushState() eine Ausnahme aus . Dieser Parameter ist optional; wenn er nicht angegeben wird, handelt es sich um die aktuelle URL des Dokuments.

Hinweis: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) bis Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) werden die eingehenden Objekte mithilfe von JSON serialisiert. Ab Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) werden Objekte mithilfe des strukturierten Kopieralgorithmus serialisiert. Dadurch können mehr Arten von Objekten sicher übergeben werden.

In gewisser Weise ähnelt der Aufruf von pushState() dem Festlegen von window.location='#foo', da ein neuer Verlaufseintrag im aktuellen Dokument erstellt und aktiviert wird. Aber pushState() hat seine eigenen Vorteile:

1. Die neue URL kann eine beliebige URL mit demselben Ursprung sein. Bei Verwendung der window.location-Methode kann nur eine Änderung des Hashs sicherstellen, dass sie im selben Dokument verbleibt.

2. Entscheiden Sie, ob Sie die URL entsprechend Ihren persönlichen Bedürfnissen ändern möchten. Stattdessen wird durch das Festlegen von window.location='#foo' nur dann ein neuer Verlaufseintrag erstellt, wenn der aktuelle Hashwert nicht foo ist.

3. Sie können abstrakte Daten zu neuen Verlaufseinträgen hinzufügen. Wenn Sie Hash-basierte Methoden verwenden, können Sie die relevanten Daten nur in einen sehr kurzen String umwandeln.

Beachten Sie, dass die Methode pushState() niemals das Hashchange-Ereignis auslöst, selbst wenn die neue Adresse nur den Hash ändert.

Popstate-Event Immer wenn sich der aktivierte Verlauf ändert, wird das Popstate-Ereignis ausgelöst. Wenn der aktivierte Verlaufseintrag von pushState erstellt oder von der Methode replaceState beeinflusst wurde, enthält die Statuseigenschaft des Popstate-Ereignisses eine Kopie des Statusobjekts des Verlaufs.

replaceState()-Methode Die Operation „history.replaceState()“ ähnelt der Operation „history.pushState()“, außer dass die Methode „replaceState()“ den aktuellen Verlaufseintrag ändert, anstatt einen neuen Eintrag zu erstellen.

Die Verwendung der Methode „replaceState()“ ist besonders geeignet, wenn Sie das Statusobjekt oder die URL des aktuellen Verlaufseintrags als Reaktion auf eine Benutzeroperation aktualisieren möchten.

2. Umsetzungsideen 1. Verwenden Sie das Popstate-Ereignis, um das Click-Return-Ereignis zu überwachen.

2. Wenn das Ereignis ausgelöst wird, stellen Sie fest, ob es im Verlauf der aktuellen Seite eine Seite gibt, die zurückgegeben werden kann.

3. Wenn es keine Seite gibt, zu der Sie zurückkehren können, fügen Sie zwei Datensätze ein:

1), ausgewiesene Sprungseite.

2), leerer Datensatz. (Aktuelle Seite unverändert lassen)

3. Implementierungsmethode

 //返回之前没页面则返回首页
    function pushHistory() {
      if (history.length < 2) {
        var state = {
          title: "index",
          url: getHttpPrefix + "index.html"
        };
        window.history.pushState(state, "index", location.href);
        state = {
          title: "index",
          url: ""
        };
        window.history.pushState(state, "index", "");
      }
      //lll("history.state" + history.state)
      //console.log(history.state) 
}

Bestimmen Sie die Anzahl der Datensätze im aktuellen Verlauf, da der Browser beim Laden der Seite automatisch einen Datensatz pusht. Wir müssen also beurteilen, ob die Länge weniger als 2 beträgt.

Das eingefügte Statusobjekt dient dazu, den entsprechenden URL-Link abzurufen.
Hinweis:
Im ersten pushState habe ich die Sprung-URL in das Statusobjekt eingefügt, um den Sprungvorgang zu erleichtern. Der zweite Parameter hat keine praktische Bedeutung, da aktuelle Browser diesen Parameter grundsätzlich nicht unterstützen.
Der dritte Parameter ersetzt den Link in der aktuellen Adressleiste, die Seite springt jedoch nicht. (Ich habe zuvor einen Fehler gemacht, als ich den dritten Parameter auf den Homepage-Link gesetzt habe, was dazu führte, dass die Adressleiste in den Homepage-Link geändert wurde, sodass die Links auf der aktuellen Seite basierend auf der Homepage sprangen, was dazu führte, dass alle Links auf der Seite zu Sprung. Falsche Übertragung )

  setTimeout(function () {
      pushHistory()
      window.addEventListener("popstate", function (e) {
        lll("popstate"+window.history.state)
        if (window.history.state != null && window.history.state.url != "") {
          location.href = window.history.state.url
        }
      });
    }, 300);

Dieser Code wird im Ready-Ereignis der Seite platziert und ausgeführt. Die Verzögerung von 300 Millisekunden dient dazu, den Vorgang zu verzögern und einen Konflikt mit dem System-Pop-Ereignis zu verhindern.
Mit der if-Anweisung soll ermittelt werden, ob im Verlauf ein Statusobjekt vorhanden ist, da nur Datensätze, die unseren Anforderungen entsprechen, über das von uns hinzugefügte Statusobjekt verfügen. Basierend auf diesem Punkt kann der Seitensprungvorgang ausgeführt werden.
Dadurch wird der gewünschte Effekt erzielt.
4. Schreiben Sie am Ende
Nachteile:
1. Offensichtlich, wie eingangs erwähnt. Nur für Browser geeignet, die HTML5 unterstützen.
2. Da zwei Datensätze eingefügt werden, ähnlich wie bei der Rückkehr auf mobilen Endgeräten wie WeChat, müssen Sie noch zweimal auf „Zurück“ klicken, um die Seite zu starten und zum WeChat-Chatfenster zurückzukehren, was eine schlechte Benutzererfahrung darstellt.

Zusammenfassung:
Diese Methode kann auf jeden Fall optimiert und perfektioniert werden, aber meine derzeitige Kraft reicht nicht aus, um sie perfekt zu perfektionieren.

Ich hoffe, dass Freunde, die diesen Artikel lesen, sich inspirieren lassen oder einen besseren Weg finden können, dies zu erreichen.