JavaScript implémente les fonctions avant et arrière du navigateur sans compétences rafraîchissantes_javascript

J'apprends backbone récemment. Pour comprendre backbone, vous devez d'abord comprendre spa. Pour comprendre spa, vous devez d'abord comprendre comment une application d'une seule page peut modifier l'URL sans actualiser la page.

Par rapport au passage à différentes pages, on peut dire qu'AJAX a grandement amélioré l'expérience de navigation de l'utilisateur. Il est très agréable de ne pas avoir à voir l'écran blanc entre les changements de page. Cependant, de nombreuses premières applications AJAX ne prenaient pas en charge les fonctions avant et arrière du navigateur. Cela faisait que l'utilisateur, quel que soit l'endroit où il naviguait sur le site Web, revenait immédiatement à la position d'origine une fois actualisé, et l'utilisateur ne pouvait pas utiliser le navigateur. Fonctions avant et arrière pour changer l'historique de navigation.

Pour le premier problème, il est relativement simple à résoudre. Il suffit d'utiliser des cookies ou localStorage pour enregistrer l'état de l'application, de lire cet état lors de l'actualisation de la page, puis d'envoyer la requête ajax correspondante pour changer de page. Mais le deuxième problème est très gênant. Parlons d’abord de la solution des navigateurs modernes.

Solution HTML5

Pour comprendre comment HTML5 implémente l'avant et l'arrière, vous devez d'abord comprendre l'objet historique et l'objet emplacement.

objet historique

Propriétés de l'objet historique

1.length : renvoie le nombre d'URL dans la liste de l'historique du navigateur. Chaque fois que l'utilisateur visite une page dans l'onglet actuel, ce nombre est augmenté de 1. Pour des raisons de confidentialité, le contenu spécifique de l'URL n'est pas visible.
2.state : objet lié à l'URL actuelle, qui ne peut être ajouté ou modifié que via pushState et replaceState. Nous pouvons l'utiliser pour stocker des informations liées à l'URL.

Méthode objet Historique

1.history.back()

Cette méthode n'a aucun paramètre. Après avoir été déclenchée, elle reviendra à la page précédemment consultée, ce qui équivaut à cliquer sur le bouton retour du navigateur.

2.history.forward()

Cette méthode n'a aucun paramètre. Lorsqu'elle est déclenchée, elle reviendra à la page que vous avez parcourue avant de revenir en arrière, ce qui équivaut à cliquer sur le bouton Suivant du navigateur.

3.history.go(numéro)

Cette méthode accepte un paramètre de variable entière. history.go(-1) équivaut à revenir en arrière d'une page, history.go(1) équivaut à avancer d'une page et history.go(0) actualisera le page actuelle.

4.history.pushState(état, titre, url)

La clé pour changer l'URL sans actualiser la page est la suivante. Cette méthode changera le location.href de la page actuelle et modifiera l'objet history.state actuel. Après l'exécution, history.length augmentera de 1. Cette méthode accepte trois paramètres,

1.state : Objet lié à l'URL actuelle.
2.title : Le titre de la page, mais tous les navigateurs l'ignorent. Pour modifier le titre, vous devez quand même utiliser document.title.
3.url : Une URL dans le même domaine que la page actuelle, location.href deviendra cette valeur.

5.history.replaceState(état, titre, url)

Cette méthode est la même que ci-dessus, mais elle ne changera pas history.length, mais modifiera uniquement history.state et location.href.

Notez que le troisième paramètre de pushState et replaceState ne peut pas traverser de domaines et ne déclenchera pas l'événement popstate et l'événement onhashchange du navigateur (testés sous chrome33).

objet de localisation

En plus de cliquer sur le bouton avant/arrière et sur l'événement d'historique, vous pouvez également modifier l'URL via la méthode de localisation et modifier les propriétés de localisation :

Attributs de l'objet de localisation (lecture et écriture) :

1.host : numéro de port du nom de domaine
2.hostname : nom de domaine
3.port : numéro de port
4.protocole : protocole
5.href : chemin complet
6.origine : port du nom de domaine du protocole
7.hash : URL (hash) commençant par le signe dièse (#)
8.pathname : chemin du document, nom du document
9.search :Le contenu après (?)

Vous pouvez atteindre l'objectif de non-actualisation en modifiant location.href ou location.hash.

Méthodes de localisation d'objet :

1.assign : modifiez la valeur de l'url et l'ajout de l'url actuelle à l'historique history.length augmentera de 1. location.asig('#' x) modifiera l'URL mais n'actualisera pas la page.
2.reload : actualisez la page.
3.replace : modifiez la valeur de l'url, mais history.length reste inchangé. La méthode d'utilisation est la même que pour assigner.

événement popstate

Lorsque l'URL change, par exemple, l'utilisateur clique sur le bouton avant/arrière, history.go(n) (n n'est pas égal à 0), location.hash = x (x n'est pas égal à l'emplacement actuel. hash) déclenchera cet événement. Vous pouvez l'utiliser pour surveiller les URL afin de mettre en œuvre diverses fonctions.

Copier le code Le code est le suivant :

​ window.onpopstate = fonction(){
               //faire quelque chose
>

é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...