Récemment, j'apprends l'épine dorsale. Lorsque vous apprenez à comprendre la colonne vertébrale, vous devez d'abord comprendre Spa. Lorsque vous comprenez SPA, vous devez d'abord comprendre comment les applications d'une seule page peuvent modifier l'URL sans rafraîchir la page.
Par rapport aux sauts à différentes pages, Ajax peut être considéré comme ayant considérablement amélioré l'expérience de navigation de l'utilisateur. Il est très agréable de ne pas voir l'écran blanc entre la commutation de la page. Cependant, de nombreuses applications Ajax antérieures n'ont pas pris en charge le mouvement vers l'avant et vers l'arrière du navigateur, ce qui a fait revenir immédiatement les utilisateurs à leur position d'origine, peu importe où ils naviguent sur le site Web, et les utilisateurs n'ont pas pu changer l'historique de la navigation via le bouton de mouvement vers l'avant et vers l'arrière du navigateur.
Pour le premier problème, il est assez facile à résoudre. Utilisez simplement des cookies ou localStorage pour enregistrer l'état de l'application. Lisez cet état lors de la rafraîchissement de la page, puis envoyez la demande AJAX correspondante pour modifier la 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 peut avancer et reculer, vous devez d'abord comprendre les objets historiques et les objets de localisation.
objet d'histoire
Propriétés d'objet historique
1.Length: renvoie le nombre d'URL dans la liste d'historique du navigateur. Pour chaque page que l'utilisateur visite sur la balise actuelle, ce numéro est ajouté par 1. En raison de raisons de confidentialité, le contenu URL spécifique n'est pas visible.
2. State: les objets liés à l'URL actuelle ne peuvent être ajoutés ou modifiés que via Pushstate et Rempacestate. Nous pouvons l'utiliser pour stocker des informations liées aux URL.
Méthode de l'objet historique
1.History.back ()
Cette méthode n'a pas de paramètres. Après le déclenchement, il reviendra à la page précédente naviguée, ce qui équivaut à cliquer sur le bouton arrière du navigateur.
2.History.Forward ()
Cette méthode n'a pas de paramètres. Après le déclenchement, il reviendra à la page que vous parcourez avant de naviguer, ce qui équivaut à cliquer sur le bouton avant du navigateur.
3.History.go (numéro)
Cette méthode accepte un paramètre de variable de mise en forme, History.go (-1) est équivalent au soutien d'une page, History.go (1) est équivalent pour faire avancer une page, History.go (0) actualisera la page actuelle.
4.History.pushstate (État, titre, URL)
La clé pour modifier l'URL et ne pas rafraîchir la page est le. Cette méthode modifiera l'emplacement. Après l'exécution, History.Length sera augmenté de 1. Cette méthode accepte trois paramètres.
1.State: l'objet lié à l'URL actuelle.
2.Title: Titre de la page, mais tous les navigateurs l'ignorent. Pour modifier le titre, vous devez toujours utiliser Document.title.
3.URL: URL avec 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 celle ci-dessus, mais elle ne changera pas History.Length, mais ne modifiera que History.state et Location.Href.
Notez que le troisième paramètre pushstate et le remplacement ne peuvent pas croiser dans le domaine et ne déclenchera pas l'événement PopState du navigateur et l'événement OnHashChange (testé sous Chrome33).
objet de localisation
En plus de cliquer sur le bouton avant / arrière et l'événement d'historique, vous pouvez également modifier l'URL via la méthode d'emplacement et modifier les propriétés d'emplacement:
Propriétés de l'objet de localisation (lire et écrire):
1.Host: Nom de domain + numéro de port
2.Hostname: nom de domaine
3. Port: numéro de port
4.Protocol: protocole
5.Href: chemin complet
6.origine: protocole + nom de domaine + port
7.Hash: URL (hachage) en commençant par le signe de la livre (#)
8.Pathname: chemin de document + nom de document
9.search :() Le contenu suivant
Vous pouvez atteindre l'objectif de rafraîchissement en modifiant l'emplacement.href ou l'emplacement.hash.
Méthodes d'emplacement Objet:
1.Sissign: modifiez la valeur de l'URL et ajoutez l'URL actuelle à l'historique.Length augmentera de 1. Emplacement.assig ('#' + x) modifiera l'URL mais ne rafraîchira pas la page.
2. Reload: actualisez la page.
3. Replace: modifiez la valeur de l'URL, mais History.Length reste inchangée. La même méthode d'utilisation.
événement popstate
Lorsque l'URL change, par exemple, si l'utilisateur clique sur le bouton Forward / Retour, History.go (n) (n n'égale pas 0), l'emplacement.hash = x (x n'égale pas l'emplacement actuel.hash) déclenchera cet événement. Vous pouvez l'utiliser pour surveiller l'URL pour implémenter diverses fonctions.
La copie de code est la suivante:
window.onpopstate = function () {
// fait STH
}
Événement Onhashchange
La modification de la valeur de hachage déclenchera l'événement PopState et le déclenchement de l'événement PopState ne déclenchera pas nécessairement l'événement OnHashChange. Après les tests:
1. Changement de hachage mais l'emplacement. Le nom reste inchangé déclenchera un événement OnHashChange, comme History.pushstate (",", '#abc');
2. Si Hash et Location.
Comment écrire de vieux navigateurs
Les anciens navigateurs ne prennent pas en charge Pushstate et remplacent, donc la façon de surveiller l'URL change via PopState (en fait, il ne prend pas en charge cette méthode). Ensuite, vous ne pouvez modifier le contenu que l'URL # pour ne pas actualiser, mais ils ne prennent pas en charge Onhashchange, vous êtes donc indifférent aux modifications de l'URL (sauf que la page fera défiler vers la position d'ID correspondante de la page). Ensuite, vous ne pouvez utiliser que le mouvement ultime: sondage et setterval pour écouter la valeur de l'URL. Comme ça:
La copie de code est la suivante:
var prevHash = window.location.hash;
var callback = function () {...}
window.setInterval (function () {
if (window.location.hash! = prevHash) {
prevHash = window.location.hash;
rappel (prevhash);
}
}, 100);
Bien sûr, l'écriture est très frustrante. Si vous n'envisagez pas de cliquer sur la balise A avec ID sur la page pour modifier le hachage, vous pouvez utiliser le modèle de conception pour implémenter élégamment l'URL de surveillance. Par exemple, le modèle d'observateur classique utilise une classe pour implémenter la fonction du changement de hachage, puis toutes les classes (observateurs) qui souhaitent écouter les changements dans l'URL pour s'abonner à cette classe (observateur).
La copie de code est la suivante:
// modifie la classe d'URL
fonction urlchanger () {
var _this = this;
this.observers = [];
// Ajouter un observateur
this.addobserver = fonction (obj) {...}
// Supprimer l'observateur
this.deleteObserver = fonction (obj) {...}
// informer les observateurs
this._notifyObservers = function () {
var longueur = _this.observers.length;
console.log (longueur)
pour (var i = 0; i <longueur; i ++) {
_This.Observers [i] .update ();
}
}
// change l'URL
this.changeurl = fonction (hash) {
window.location.hash = hash;
_This._NotifyObservers ();
}
}
// cours d'écoute
fonction oneofObServers () {
var _this = this;
this.update = function () {...}
}
//accomplir
var o1 = new Urlchanger ();
var o2 = new OneofObServers ();
O1.AddObserver (O2);
o1.changeurl ('fun / arg1 / arg2 /');
// o2 a fait sth ...