L’événement `popstate`
Réagissez à la navigation arrière et avant du navigateur.
L’événement `popstate` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Fonctionnement de la navigation dans l’historique
L’événement popstate se déclenche sur la fenêtre lorsque l’utilisateur navigue dans l’historique (retour, avance ou appel JavaScript à history.back). Il permet à la SPA de restituer la vue appropriée en réponse à une navigation déclenchée par le navigateur.
Déclenchement
L’événement se déclenche lors des clics sur les boutons Retour ou Avancer, avec history.back(), history.forward() et history.go(n). Il ne se déclenche pas (NOT) lorsque pushState ou replaceState sont appelés manuellement — il s’agit de mises à jour programmatiques, et la page les connaît déjà.
window.addEventListener("popstate", (e) => {
console.log("Navigated to", location.pathname, "state:", e.state);
renderPage(location.pathname);
});La propriété d’état
La propriété state de l’événement contient l’objet d’état que vous avez transmis à pushState ou replaceState pour l’entrée vers laquelle vous naviguez. Utilisez-la pour restaurer un état de l’interface (onglet ouvert, position de défilement) qui ne figure pas dans l’URL.
Lire la nouvelle URL
La barre d’adresse est déjà mise à jour lorsque l’événement se déclenche. Lisez location.pathname, location.search et location.hash pour trouver la nouvelle URL. Avec l’état, ces informations suffisent pour afficher la vue de destination.
Chargement initial de la page
L’événement ne se déclenche pas (NOT) lors du chargement initial de la page — uniquement pendant une navigation. Affichez la vue initiale à partir de l’adresse au démarrage, puis laissez l’événement gérer les navigations suivantes. Sans cela, la page initiale est vide lorsque la première navigation arrière y revient.
// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));Changement de fragment ou navigation dans l’historique
Pour un routage reposant uniquement sur les fragments (URL comme /#/about), l’événement hashchange se déclenche lorsque le fragment change. L’événement de navigation dans l’historique se déclenche également lors des changements de chemin. Les SPA modernes utilisent l’API History et cet événement ; le routage par fragment est obsolète.
Interception des clics
Pour qu’un clic normal sur <a> déclenche une navigation côté client, interceptez le clic, appelez preventDefault, puis appelez pushState et renderPage. Vérifiez les touches de modification (Commande/Contrôle-clic pour ouvrir un nouvel onglet) et laissez-les au comportement par défaut.
document.addEventListener("click", (e) => {
const a = e.target.closest("a");
if (!a || a.target || e.metaKey || e.ctrlKey) return;
e.preventDefault();
history.pushState(null, "", a.href);
renderPage(location.pathname);
});Restaurer la position de défilement
Les navigateurs tentent de restaurer automatiquement la position de défilement lors d’une navigation arrière, mais cela n’est pas fiable dans les SPA, car le contenu est affiché de manière asynchrone. Enregistrez le défilement dans l’état de pushState et restaurez-le lors de la navigation : window.scrollTo(0, e.state?.scroll ?? 0).
Point d’attention concernant l’affichage asynchrone
Si renderPage récupère des données de manière asynchrone, l’URL est mise à jour avant l’arrivée du contenu. Affichez un état de chargement, puis affichez le contenu. Évitez les conditions de concurrence dans lesquelles l’utilisateur revient en arrière pendant une récupération et où le résultat de cette récupération annulée écrase la nouvelle vue.
Routeurs des bibliothèques
Les routeurs de React, de Vue et de SvelteKit encapsulent l’API History et l’événement de navigation dans l’historique. Même sans bibliothèque, le mécanisme sous-jacent est le même : écouter l’événement, intercepter les liens et appeler pushState. Lorsque les dépendances sont un facteur important, développez votre propre routeur en environ 50 lignes de JavaScript standard.
Piège courant : fuites de mémoire
La configuration de chaque vue peut associer des écouteurs d’événements et des minuteries. Sans démontage explicite lors du changement de vue (dans la navigation ou dans l’enveloppe de pushState), les écouteurs s’accumulent et dégradent les performances au fil du temps. Suivez les abonnements propres à chaque vue avec un AbortController et annulez-les lors du changement de vue.
Vérification des connaissances
Pourquoi l’événement de navigation dans l’historique ne se déclenche-t-il pas (NOT) lorsque vous appelez vous-même history.pushState ?
Résumé
L’événement de navigation dans l’historique se déclenche lors des navigations arrière ou avant du navigateur, ce qui donne accès à l’état enregistré et à la nouvelle adresse. Il ne se déclenche pas lors de pushState ou replaceState (votre code le sait déjà), ni au chargement initial de la page (affichez-la manuellement). Interceptez les clics sur les liens pour la navigation d’une SPA, enregistrez la position de défilement dans l’état et démontez les écouteurs lors du changement de vue pour éviter les fuites.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « L’événement `popstate` » est-elle gratuite ?
Oui — le texte complet de « L’événement `popstate` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « L’événement `popstate` » ?
Réagissez à la navigation arrière et avant du navigateur. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « L’événement `popstate` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- `pushState` et `replaceState`
- L’événement `popstate`
- Routage par hachage ou par chemin
- L’API Navigation des navigateurs modernes