Mise à jour de la page avec JavaScript : guide complet pour débutants

Pourquoi actualiser une page par le code ?

\n\n

Imaginez : vous développez un chat, un jeu en ligne ou un formulaire de contact. L'utilisateur a envoyé des données — et tout s'est figé. Pour voir le résultat, il doit appuyer sur F5 ou cliquer sur le bouton du navigateur. Pas pratique, n'est-ce pas ?

\n\n

Imaginez maintenant que la page s'actualise toute seule — dès que l'action est terminée. De la magie ? Non, du JavaScript pur et quelques lignes de code. C'est exactement ce dont nous allons parler aujourd'hui.

\n\n

Le sujet semble simple à première vue, mais même les développeurs expérimentés confondent parfois les méthodes location.reload() et window.location.href. Nous allons passer en revue toutes les options, les pièges et les bonnes pratiques. C'est parti !

\n\n

Le personnage principal : location.reload()

\n\n

La manière la plus populaire et la plus correcte d'actualiser une page avec JavaScript est la méthode location.reload(). Elle fait exactement ce qui est écrit sur la boîte : recharge le document actuel.

\n\n

// La version la plus simple\nlocation.reload();

\n\n

Mais il y a un détail. Cette méthode accepte un paramètre optionnel — une valeur booléenne forceGet.

\n\n

\n
• location.reload() — recharge la page en utilisant le cache du navigateur, si possible.
\n
• location.reload(true) — chargement forcé depuis le serveur, en ignorant le cache.
\n

\n\n

La différence est notable lorsque vous travaillez avec des données dynamiques. Si vous avez besoin d'obtenir une version fraîche de la page de manière garantie — utilisez true.

\n\n

Comparaison : reload() vs window.location.href

\n\n

Sur Stack Overflow, on demande souvent : "Peut-on simplement assigner window.location.href = window.location.href ?"

\n\n

Réponse courte : on peut, mais c'est une rustine. Réponse longue — regardez le tableau.

\n\n

Tableau comparatif des méthodes de rechargement de page

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Méthode	Comportement	Utilise le cache	Recommandée
location.reload()	Recharge la page	Oui (par défaut)	✅ Oui
location.reload(true)	Rechargement forcé depuis le serveur	Non	✅ Oui
window.location.href = window.location.href	Redirige vers la même page	Oui	⚠️ Avec précaution
window.location = window.location	Pareil, plus court	Oui	⚠️ Avec précaution
history.go(0)	Navigation vers la page actuelle dans l'historique	Oui	❌ Obsolète

\n\n

Comme vous le voyez, location.reload() est la méthode la plus fiable et la plus prévisible. Les autres options peuvent fonctionner de manière instable dans différents navigateurs.

\n\n

Actualisation automatique à intervalle défini

\n\n

Parfois, on a besoin que la page s'actualise automatiquement — par exemple, pour afficher le taux de change ou le statut du serveur. C'est là que setTimeout ou setInterval viennent à la rescousse.

\n\n

Actualisation 5 secondes après le chargement

\n\n

// On attend 5 secondes, puis on recharge\nsetTimeout(function() {\n    location.reload(true);\n}, 5000);

\n\n

Actualisation périodique toutes les 30 secondes

\n\n

// Actualiser la page toutes les 30 secondes\nsetInterval(function() {\n    location.reload();\n}, 30000);

\n\n

Important : N'abusez pas de l'actualisation automatique. Si la page