Diese Funktion wurde zuvor kurz beschrieben. Dieses Mal werden wir die Prinzipien und vorhandenen Probleme im Detail erläutern (da die neue API von HTML5 verwendet wird, gibt es Kompatibilitätsprobleme. Daher wird empfohlen, dass das mobile Terminal diese Methode anwendet).
Funktionsbeschreibung:
Erstellen Sie eine neue Registerkarte im Browser und geben Sie eine URL an. Nach dem Laden der Webseite dürfen die Klicks nicht unter dem normalen Vorgang zurückkehren. Da es keinen relevanten Verlauf der aktuellen Registerkarte gibt, können keine Datensätze zurückgegeben werden.
Als Antwort auf die Anfrage des Kunden fügen Sie in diesem Fall einen Link (z. B. die Homepage) zu seinem History -Datensatz hinzu, sodass Sie auf der neu geöffneten Seite auf die Startseite springen können, sodass Benutzer die verschiedenen Funktionen des Systems sehen und die Plattform fördern können.
1. Schlüsselpunkte des Wissens
HTML5 führt die Methode von History.pusstate () und History.Replacestate () ein, mit der Sie das Element der Verlaufseinträge nach Element hinzufügen und ändern können. Diese Methoden können zusammen mit dem Ereignis von window.onpopstate zusammenarbeiten.
Fall:
Angenommen, http://mozilla.org/foo.html führt den folgenden JavaScript -Code aus:
Die Codekopie lautet wie folgt: var stateObj = {foo: "bar"}; history.pusstate (StateObj, "Seite 2", "bar.html");
Dadurch wird die Adressleiste des Browsers http://mozilla.org/bar.html angezeigt, aber die Seite bar.html wird weder geladen noch prüfen, ob bar.html existiert.
Nehmen wir an, dass der Benutzer jetzt zu http://google.com navigiert und dann auf die Schaltfläche zurück klickt. Zu diesem Zeitpunkt wird in der Adressleiste http://mozilla.org/bar.html angezeigt, und die Seite löst das Popstate -Ereignis aus. Das staatliche Objekt im Ereignis enthält eine Kopie von StateObj. Die Seite sieht aus wie Foo.html, obwohl der Seiteninhalt im Popstate -Event geändert werden kann.
Wenn wir erneut auf die Schaltfläche zurück klicken, wechselt die URL zurück zum http://mozilla.org/foo.html -Dokument, um ein anderes Popstate -Ereignis auszulösen. Diesmal ist das Statusobjekt NULL. Fallback ändert auch nicht den Inhalt des Dokuments.
PushState () -Methode
PushState () enthält drei Parameter: ein Statusobjekt, einen Titel (der jetzt ignoriert wird) und eine optionale URL -Adresse. Untersuchen wir die Details dieser drei Parameter separat:
Statusobjekt - Ein JavaScript -Objekt, das einem neuen Verlaufseintrag zugeordnet ist, der mit der PushState () -Methode erstellt wurde. Immer wenn der Benutzer zum neu erstellten Status navigiert, wird das Popstate -Ereignis ausgelöst, und die staatliche Eigenschaft des Ereignisobjekts enthält eine Kopie des Zustandsobjekts des Verlaufseintrags.
Jedes serialisierbare Objekt kann als Zustandsobjekt behandelt werden. Da der Firefox -Browser Statusobjekte auf der Festplatte des Benutzers speichert, sodass sie nach dem Neustart des Browsers wiederhergestellt werden können, beschränken wir die Größe der Zustandsobjekte zwangsweise auf 640K. Wenn Sie ein Statusobjekt übergeben, das diese Grenze an die PushState () -Methode überschreitet, stellt die Methode eine Ausnahme aus. Wenn Sie große Datenmengen speichern müssen, wird empfohlen, SessionStorage oder LocalStorage zu verwenden.
Titel - Firefox -Browser ignoriert derzeit diesen Parameter, obwohl er in Zukunft verwendet werden kann. In Anbetracht der Tatsache, dass diese Methode in Zukunft geändert werden kann, wird es sicherer sein, eine leere Zeichenfolge zu übergeben. Alternativ können Sie auch einen kurzen Titel übergeben, in dem Sie den Status angeben, den Sie eingeben möchten.
Adresse (URL) - Die Adresse des neuen Verlaufseintrags. Der Browser lädt die Adresse nicht nach dem Aufrufen der PushState () -Methode, aber danach kann es versuchen, zu laden, z. B. der Benutzer startet den Browser neu. Die neue URL ist nicht unbedingt ein absoluter Weg; Wenn es sich um einen relativen Weg handelt, basiert es auf der aktuellen URL. Die bestandene URL sollte mit der aktuellen URL übereinstimmen, ansonsten wird Pushstate () eine Ausnahme auswerfen. Dieser Parameter ist optional; Wenn nicht angegeben, ist es 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 übergebenen Objekte mit JSON serialisiert. Beginnend mit Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3) werden Objekte unter Verwendung eines strukturierten Kopieralgorithmus serialisiert. Auf diese Weise können mehr Arten von Objekten sicher übergeben werden.
In gewissem Sinne ist das Aufrufen von PushState () ein bisschen ähnlich wie das Einstellen von Fenster. Aber Pushstate () hat seine eigenen Vorteile:
1. Die neue URL kann jede homologe URL sein. Im Gegensatz dazu kann bei der Verwendung der Methode der Fenster.lokationsmethode nur das Ändern von Hash sicherstellen, dass es im selben Dokument bleibt.
2. Entscheiden Sie, ob Sie die URL entsprechend Ihren persönlichen Bedürfnissen ändern möchten. Setzen Sie stattdessen Window.location = '#foo' und erstellen Sie nur einen neuen Verlauf, wenn der aktuelle Hash -Wert nicht foo ist.
3.. Sie können abstrakte Daten zum neuen Verlaufseintrag hinzufügen. Wenn Sie eine Hash-basierte Methode verwenden, können Sie die entsprechenden Daten nur in eine sehr kurze Zeichenfolge übertragen.
Beachten Sie, dass die PushState () -Methode niemals das Hashchange -Ereignis auslösen wird, auch wenn die neue Adresse nur Hash ändert.
Popstate -Event
Das Popstate -Ereignis wird immer dann ausgelöst, wenn sich der aktivierte Verlauf ändert. Wenn der aktivierte History -Eintrag von Pushstate erstellt oder von der Austauschdatenmethode betroffen ist, enthält das Statusattribut des Popstate -Ereignisses eine Kopie des Statusobjekts des Verlaufs.
methode ersetzen () ersetzen
Der Vorgang der Geschichte.Replacestate () ähnelt der Geschichte.
Wenn Sie das Statusobjekt oder die URL des aktuellen Verlaufseintrags als Antwort auf bestimmte Aktionen des Benutzers aktualisieren möchten, ist die Verwendung der Methode ersatzdarsteller () besonders geeignet.
2. Implementierungsideen
1. Verwenden Sie das Popstate -Ereignis, um das Click and Return -Ereignis anzuhören.
2. Wenn das Ereignis ausgelöst wird, bestimmen Sie, ob es eine Seite gibt, um den Verlauf der aktuellen Seite zurückzugeben.
3. Wenn es keine Seite gibt, die zurückgegeben werden kann, werden zwei Datensätze eingefügt:
1) Die angegebene Sprungseite.
2) leere Aufzeichnung. (Die aktuelle Seite nicht ändern.)
Implementierungsmethode
// Kehre zur Startseite ohne eine Seite zurück, bevor die Funktion pushhistory () {if (history.length <2) {var state = {title: "index", url: gethttpprefix + "index.html"}; window.history.pushstate (Zustand, "Index", location.href); state = {title: "index", url: ""}; window.history.pusstate (Zustand, "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 drückt. Wir müssen also feststellen, ob die Länge weniger als 2 beträgt.
Das staatliche Objekt ist, um den entsprechenden URL -Link zu erhalten.
Notiz:
Ich habe die Sprung -URL in das Statusobjekt für den ersten Pushstate gesteckt, um den Sprungvorgang zu erleichtern. Der zweite Parameter hat keine praktische Bedeutung, da der aktuelle Browser diesen Parameter im Grunde nicht anwendet.
Der dritte Parameter ersetzt den Link in der aktuellen Adressleiste, die Seite wird jedoch nicht springen. (Ich habe zuvor einen Fehler gemacht und den dritten Parameter auf den Homepage -Link festgelegt, der dazu führte, dass die Adressleiste auf den Homepage -Link geändert wurde, sodass die Links auf der aktuellen Seite basierend auf der Homepage umgeleitet werden, was zum Fehler aller Links auf der zugelassenen Seite führt.)
setTimeout (function () {pushHistory () window.adDeVentListener ("popstate", function (e) {lll ("popstate"+window.history.state) if (window.history.state! = null && window.history.url! 300);Dieser Code wird in erster Stelle der Seite platziert, mit einer Verzögerung von 300 Millisekunden, um den Betrieb zurückzugeben und Konflikte mit dem System -Pop -Ereignis zu verhindern.
Um festzustellen, ob der Verlauf über ein staatliches Objekt verfügt, werden nur Aufzeichnungen, die unseren Anforderungen erfüllen, das von uns hinzugefügte staatliche Objekt, sodass der Seitensprungbetrieb basierend auf diesem Punkt durchgeführt werden kann.
Dies wird den gewünschten Effekt erzielen.
4. Schreiben Sie am Ende
Mangel:
1. Offensichtlich, wie am Anfang erwähnt. Nur für Browser geeignet, die HTML5 unterstützen.
2. Da zwei Datensätze eingefügt wurden, erfordert die Rückgabe mobiler Terminals wie WeChat zwei Klicks, um vor dem Start der Seite und dem Rückkehr zum WeChat -Chat -Fenster zurückzukehren, das eine schlechte Benutzererfahrung hat.
Zusammenfassen:
Diese Methode kann definitiv optimiert und verbessert werden, aber meine Stärke reicht nicht aus, um das Niveau der Perfektion zu perfektionieren.
Ich hoffe, dass Freunde, die diesen Artikel lesen, inspirieren können, oder es gibt bessere Möglichkeiten, ihn zu erreichen.