JavaScript wird nicht aktualisiert, um die Vorwärts- und Rückwärtsfunktionen des Browsers zu implementieren. Javascript-Fähigkeiten

Um Backbone zu verstehen, müssen Sie zuerst Spa verstehen. Um Spa zu verstehen, müssen Sie zunächst verstehen, wie Single-Page-Anwendungen die URL ändern können, ohne die Seite zu aktualisieren.

Im Vergleich zum Springen zu verschiedenen Seiten hat AJAX das Surferlebnis des Benutzers erheblich verbessert. Es ist sehr angenehm, den weißen Bildschirm zwischen dem Seitenwechsel nicht sehen zu müssen. Allerdings unterstützten viele frühe AJAX-Anwendungen die Vorwärts- und Rückwärtsfunktionen des Browsers nicht. Dies führte dazu, dass der Benutzer unabhängig davon, wo er auf der Website navigierte, nach der Aktualisierung sofort zur ursprünglichen Position zurückkehrte und der Benutzer die Funktionen des Browsers nicht verwenden konnte Vorwärts- und Rückwärts-Taste zum Wechseln des Browserverlaufs.

Das erste Problem lässt sich relativ einfach lösen. Verwenden Sie einfach Cookies oder localStorage, um den Status der Anwendung aufzuzeichnen, lesen Sie diesen Status beim Aktualisieren der Seite und senden Sie dann die entsprechende Ajax-Anfrage, um die Seite zu ändern. Aber das zweite Problem ist sehr problematisch. Lassen Sie uns zunächst über die Lösung moderner Browser sprechen.

HTML5-Lösung

Um zu verstehen, wie HTML5 vorwärts und rückwärts implementiert, müssen Sie zunächst das Verlaufsobjekt und das Standortobjekt verstehen.

Historienobjekt

Verlaufsobjekteigenschaften

1.length: Gibt die Anzahl der URLs in der Browser-Verlaufsliste zurück. Jedes Mal, wenn der Benutzer eine Seite im aktuellen Tab besucht, wird diese Zahl um 1 erhöht. Aus Datenschutzgründen ist der konkrete Inhalt der URL nicht sichtbar.
2.state: Objekt im Zusammenhang mit der aktuellen URL, das nur über pushState und replaceState hinzugefügt oder geändert werden kann. Wir können es verwenden, um Informationen im Zusammenhang mit der URL zu speichern.

History-Objekt-Methode

1.history.back()

Diese Methode hat keine Parameter. Wenn sie ausgelöst wird, kehrt sie zur zuvor durchsuchten Seite zurück, was dem Klicken auf die Zurück-Schaltfläche des Browsers entspricht.

2.history.forward()

Diese Methode hat keine Parameter. Wenn sie ausgelöst wird, kehrt sie zu der Seite zurück, die Sie durchsucht haben, bevor Sie zurückgehen, was dem Klicken auf die Vorwärtsschaltfläche des Browsers entspricht.

3.history.go(number)

Diese Methode akzeptiert einen ganzzahligen Variablenparameter. „history.go(-1)“ entspricht dem Zurückblättern um eine Seite, „history.go(1)“ entspricht dem Vorblättern um eine Seite und „history.go(0)“ aktualisiert die aktuelle Seite.

4.history.pushState(state, title, url)

Der Schlüssel zum Ändern der URL ohne Aktualisierung der Seite ist folgender: Diese Methode ändert die location.href der aktuellen Seite und ändert das aktuelle Objekt „history.state“. Nach der Ausführung wird „history.length“ um 1 erhöht. Diese Methode akzeptiert drei Parameter:

1.state: Objekt im Zusammenhang mit der aktuellen URL.
2.title: Der Seitentitel, aber alle Browser ignorieren ihn. Um den Titel zu ändern, müssen Sie weiterhin document.title verwenden.
3.url: Eine URL in derselben Domäne wie die aktuelle Seite, location.href wird zu diesem Wert.

5.history.replaceState(state, title, url)

Diese Methode ist die gleiche wie oben, ändert jedoch nicht die Datei „history.length“, sondern nur „history.state“ und „location.href“.

Beachten Sie, dass der dritte Parameter von pushState und replaceState nicht domänenübergreifend sein kann und das Popstate-Ereignis und das Onhashchange-Ereignis des Browsers nicht auslöst (getestet unter chrome33).

Standortobjekt

Zusätzlich zum Klicken auf die Vor-/Zurück-Schaltfläche und zum Verlauf des Ereignisses können Sie die URL auch über die Standortmethode ändern und die Standorteigenschaften ändern:

Attribute des Standortobjekts (Lesen und Schreiben):

1.Host: Portnummer des Domänennamens
2.Hostname: Domänenname
3.Port: Portnummer
4.Protokoll: Protokoll
5.href: vollständiger Pfad
6. Herkunft: Port des Protokolldomänennamens
7.Hash: URL(Hash), beginnend mit einem Nummernzeichen (#)
8.Pfadname: Dokumentpfad-Dokumentname
9.Suche:Der Inhalt nach (?)

Sie können den Zweck der Nichtaktualisierung erreichen, indem Sie location.href oder location.hash ändern.

Methoden des Standortobjekts:

1. Zuweisen: Ändern Sie den Wert der URL und fügen Sie die aktuelle URL zum Verlauf hinzu. Die Länge von „history.length“ wird um 1 erhöht. location.asig(‘#’ x) ändert die URL, aktualisiert aber nicht die Seite.
2. Neu laden: Aktualisieren Sie die Seite.
3. Ersetzen: Ändern Sie den Wert der URL, aber History.length bleibt unverändert. Die Verwendungsmethode ist dieselbe wie bei der Zuweisung.

Popstate-Event

Wenn sich die URL ändert, klickt der Benutzer beispielsweise auf die Schaltfläche „Vorwärts/Zurück“, „history.go(n)“ (n ist nicht gleich 0), „location.hash = x“ (x ist nicht gleich dem aktuellen Standort). Hash) wird dieses Ereignis auslösen. Sie können damit URLs überwachen, um verschiedene Funktionen zu implementieren.

Code kopieren Der Code lautet wie folgt:

​ window.onpopstate = function(){
             //etwas tun
}

événement onhashchange

La modification de la valeur de hachage déclenchera l'événement popstate, mais le déclenchement de l'événement popstate ne déclenchera pas nécessairement l'événement onhashchange. Testé :

1.hash change mais location.pathname reste inchangé déclenchera l'événement onhashchange, tel que history.pushState(", ", '#abc');
2. Il ne se déclenchera pas si le hachage et l'emplacement.pathname sont modifiés ensemble, comme history.pushState(", ", 'a#abc');

Comment écrire dans les anciens navigateurs

Les anciens navigateurs ne prennent pas non plus en charge pushState et replaceState, donc surveiller les modifications d'URL via popstate (en fait, cette méthode n'est pas prise en charge) n'est pas réalisable. Ensuite, vous ne pouvez obtenir aucune actualisation en modifiant le contenu après l'url#, mais ils ne prennent pas en charge onhashchange, ils sont donc indifférents aux changements dans l'url (sauf que la page défilera jusqu'à la position correspondant à l'identifiant de la page). Ensuite, vous ne pouvez recourir qu'à la grande astuce : interroger, définir un setInterval pour surveiller la valeur de l'url. Comme ça :

Copier le code Le code est le suivant :

var prevHash = window.location.hash
var rappel = fonction(){...}
window.setInterval(function() {
Si (window.location.hash != prevHash) {
         prevHash = window.location.hash
        rappel(prevHash);
}
}, 100);

Bien sûr, écrire de cette façon est très frustrant. Si vous n'envisagez pas de cliquer sur la balise a avec un identifiant sur la page pour modifier le hachage, vous pouvez utiliser des modèles de conception pour implémenter avec élégance les URL de surveillance. Par exemple, dans le modèle d'observateur classique, une classe est spécifiquement utilisée pour implémenter la fonction de modification du hachage, puis toutes les classes (observateurs) qui souhaitent surveiller les modifications d'URL s'abonnent à cette classe (observée).

Copier le code Le code est le suivant :

//Changer la classe de l'url
fonction UrlChanger() {
var _this = ceci;
This.observers = [];
//Ajouter un observateur
This.addObserver = function(obj) {...}
//Supprimer l'observateur
This.deleteObserver = function(obj) {...}
//Avertir les observateurs
This._notifyObservers = function() {
      var longueur = _this.observers.length;
console.log(longueur)
pour(var je = 0; je < longueur; je ) {
​​​​​​ _this.observers[i].update();
>
>
//Changer l'url
This.changeUrl = fonction (hachage) {
           window.location.hash = hash;
_this._notifyObservers();
>
>
//Cours d'écoute
fonction oneOfObservers() {
var _this = ceci;
This.update = function() {...}
>
//Mise en œuvre
var o1 = nouveau UrlChanger();
var o2 = new oneOfObservers();
o1.addObserver(o2);
o1.changeUrl('fun/arg1/arg2/');
//o2 a fait quelque chose...