L'API de l'histoire de HTML5 implémente un saut sans rafraîchissement

Une fois quand j'étais sur **. Com, j'ai trouvé que l'effet d'animation de la connexion et de l'enregistrement était très magnifique, mais ce qui m'a choqué, c'est que la page ne pouvait réellement obtenir aucun saut de rafraîchissement. J'ai passé en revue les connaissances frontales que j'ai apprises, et il ne semblait pas y avoir de technologie pour y parvenir. J'ai donc fouillé Baidu et j'ai découvert que cela avait été initialement réalisé en utilisant l'API d'histoire dans HTML5.

Une fois quand j'étais sur **. Com, j'ai trouvé que les effets d'animation de la connexion et de l'enregistrement étaient très magnifiques, mais ce qui m'a choqué, c'est que la page pouvait réellement atteindre des sauts sans rafraîchissement (révisés, vous pouvez frapper cet endroit lorsque vous regardez cet effet: Github ou FM). J'ai passé en revue les connaissances frontales que j'ai apprises, et il ne semblait pas y avoir de technologie qui pourrait y parvenir. J'ai donc découvert que cela avait été réalisé à l'origine en utilisant l'API d'histoire dans HTML5, mais cela n'a jamais été utile. Cette technologie n'a pas été appliquée tant que le blog n'a pas été révisé.

1. Ajout de la fonction d'ajouter des éléments dans l'historique du navigateur via JS.

2. Afficher l'URL dans la barre d'adresse du navigateur modifié sans rafraîchir la page.

3. Ajout d'un événement qui tire lorsque l'utilisateur clique sur le bouton arrière du navigateur.

À travers les trois points ci-dessus, il est possible de modifier dynamiquement l'URL dans la barre d'adresse du navigateur sans rafraîchir la page et afficher le contenu de la page dynamiquement.

Par exemple: lorsque le contenu de la page A et de la page B est différent, avant HTML5, si vous passez de la page A à la page B, vous devez passer de la page A à la page B dans le navigateur, ou, si vous avez besoin d'avoir une fonction de bouton arrière, vous pouvez ajouter #xxxx à l'adresse URL pour réaliser la fonction arrière. Maintenant dans HTML5, vous pouvez implémenter le traitement suivant via l'API History:

1. Demande les données B à la page A en envoyant une demande Ajax.

2. Chargez les informations correspondantes via JS à la page A à l'emplacement correspondant.

3. Passer de l'adresse URL de la page A à l'adresse URL de la page B dans la barre d'adresse du navigateur via l'API de l'historique sans rafraîchir la page.

1.Lestion du nombre de termes dans l'histoire. L'historique que JavaScript peut gérer est limité à la plage qui peut être atteinte en utilisant les touches avant et arrière du navigateur. Cette propriété renvoie la somme du nombre d'adresses contenues dans les deux boutons avant et arrière.

1. Back () Back, ce qui équivaut à appuyer sur la touche arrière.

2. Forward () aller de l'avant équivaut à appuyer sur la touche avant.

3.go () Utilisation: History.go (x); Accédez à l'adresse spécifiée dans le cadre de l'histoire. Si x <0, alors en arrière x adresses, si x> 0, alors transférez x adresses, si x == 0, alors actualisez la page qui est maintenant ouverte. History.go (0) est équivalent à Location.reload ().

1. History.pushState (données, titre [, url]): ajoutez un enregistrement en haut de la pile d'historique; Les données seront transmises en tant que paramètre lorsque l'événement OnPopState sera déclenché; Le titre est le titre de page et tous les navigateurs actuels ignoreront ce paramètre; L'URL est l'adresse de la page, facultative, et la valeur par défaut est l'adresse de la page actuelle.

2. History.Replacestate (données, titre [, url]): modifier l'historique actuel, les paramètres sont les mêmes que ci-dessus.

3. HISTORY.STATE: Utilisé pour stocker les données des données des méthodes ci-dessus. Les autorisations de lecture et d'écriture de différents navigateurs sont différentes.

4. Événement PopState: Cet événement est déclenché lorsque l'utilisateur clique sur le bouton arrière ou transféré du navigateur. La valeur de la propriété d'état de l'objet d'événement qui déclenche l'événement est lue dans la fonction de gestion des événements. Cette valeur de propriété est la première valeur de paramètre utilisée lors de l'exécution de la méthode PushState, qui enregistre l'objet qui est ajouté à l'historique du navigateur de manière synchrone.

Jusqu'à présent, le navigateur prend en charge l'API d'histoire dans HTML5 par IE10, Firefox4 ou supérieur, Chrome 8 ou supérieur, Safari5 ou supérieur.