Un aperçu de l'API de l'histoire JavaScript

Ce tutoriel explore l'API d'histoire JavaScript, un outil puissant pour manipuler l'historique de navigation d'un utilisateur dans les applications Web modernes. Les caractéristiques clés comprennent l'ajout, la suppression et le remplacement des entrées d'historique, l'amélioration de l'expérience utilisateur et la fourniture de plus de contrôle sur la navigation.

Concepts clés:

• L'objet history (une propriété de l'objet window) est le cœur de l'API, fournissant des méthodes pour interagir avec la pile d'historique du navigateur.
• Des méthodes comme back(), forward() et go() permettent de naviguer à travers l'histoire, en imitant les boutons arrière et avant du navigateur. go(n) déplace n entrées en avant ou en arrière (négatif n remonte).
• pushState() Ajoute de nouvelles entrées à l'historique, à la mise à jour de l'URL sans rechargement de page pleine. replaceState() modifie l'entrée historique actuelle.
• Chaque entrée historique peut être associée à un objet d'état, accessible via l'événement popstate.

Navigation History:

les méthodes back(), forward() et go() fournissent une navigation simple:

• history.back(); // équivalent à cliquer sur le bouton "arrière".
• history.forward(); // Équivalent à cliquer sur le bouton "Faire".
• history.go(n); // se déplace N étapes en avant (N) ou en arrière (native n).

Le nombre d'entrées dans la pile d'historique est accessible via history.length.

Manipulation des entrées d'histoire:

pushState() et replaceState() sont cruciaux pour les mises à jour dynamiques d'URL:

• history.pushState(stateObj, title, URL); Ajoute une nouvelle entrée historique. stateObj est un objet JavaScript associé à l'entrée; title (souvent ignoré) est une chaîne; URL est la nouvelle URL affichée dans la barre d'adresse.
• history.replaceState(stateObj, title, URL); remplace l'entrée historique actuelle.

L'événement popstate se déclenche lorsque l'utilisateur navigue vers l'arrière ou vers l'avant, ou lorsque back(), forward(), ou go() sont appelés. La propriété state de l'événement contient le stateObj de l'entrée d'historique correspondante.

Application pratique: un exemple de galerie de photos

Imaginez une galerie de photos où cliquer sur une miniature modifie l'image affichée et met à jour l'URL sans rechargement de page. L'API d'histoire rend cela possible. Chaque image aurait une URL unique, permettant le signet et l'accès direct. La méthode pushState() mettrait à jour l'URL lorsqu'une image est sélectionnée, et l'événement popstate gérerait la navigation entre les images.

Exploration plus approfondie:

Le réseau de développeurs Mozilla (MDN) fournit une documentation complète sur l'API de l'histoire, couvrant les techniques avancées et les détails de compatibilité du navigateur. Comprendre l'événement popstate est la clé de la création d'applications interactives qui tirent parti de l'API d'histoire efficacement. De plus, explorez comment cette API s'intègre aux frameworks JavaScript comme React et ses bibliothèques de routage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!