Recharger la page en JavaScript : location.reload()
Recharger une page en JavaScript
JavaScript location.reload() : rafraîchir une page correctement | We.Inc
Rechargez la page avec location.reload(), comparez-la avec history.go(0), replace et meta refresh, générez du code de rafraîchissement minuté et découvrez ce que fait vraiment reload(true).
Appelez location.reload() pour recharger la page actuelle, exactement comme le bouton d'actualisation du navigateur. Elle ne prend aucun argument standard. L'ancienne forme reload(true), censée contourner le cache, est un paramètre non standard que MDN indique comme pris en charge uniquement par Firefox, donc les autres navigateurs ignorent le true. history.go(0) recharge aussi la page.
Façons de rafraîchir ou de changer de page
Code
Ce qui se passe
Ajoute une entrée d'historique ?
location.reload()
Recharge l'URL actuelle
Non
history.go(0) ou history.go()
Même résultat que location.reload()
Non
location.replace(url)
Charge url et remplace l'entrée actuelle
Non, Précédent saute l'ancienne page
location.assign(url)
Charge url comme une nouvelle étape
Oui
<meta http-equiv="refresh" content="30">
Recharge après 30 secondes, sans script
Non
Recharger tient en une ligne de code, mais les raisons d'y recourir varient : récupérer de nouvelles données, réinitialiser un état bloqué, actualiser un tableau de bord à intervalle régulier ou forcer une nouvelle version du site. Ce guide présente l'appel standard, ce que font réellement les anciennes variantes et comment éviter complètement le rechargement quand il suffit de récupérer des données fraîches.
Choisissez une méthode de rafraîchissement et un intervalle dans le générateur.
La zone de code se met à jour avec un extrait prêt à coller pour cette méthode.
Utilisez les boutons pour essayer location.reload() et history.go(0) sur cette page. Les deux la rechargent.
Lisez la section sur le cache avant de compter sur un rechargement pour afficher des fichiers fraîchement déployés.
location.reload() ne renvoie rien et le code qui suit peut encore s'exécuter brièvement avant le déchargement de la page, alors placez-le en dernier.
Avant de recharger une page avec un formulaire, prévenez des saisies non enregistrées avec un écouteur beforeunload. Le navigateur affiche son propre message générique, pas le vôtre.
Un rafraîchissement minuté dans un onglet masqué gaspille des données et de la batterie. Vérifiez document.visibilityState et sautez le rechargement tant que l'onglet est en arrière-plan.
Dans une single page app, récupérer à nouveau les données ou réinitialiser l'état est généralement plus rapide et conserve la position de défilement, la saisie et le focus.
Questions fréquentes
location.reload(true) vide-t-il le cache ?
Pas de manière fiable. L'argument forceGet ne fait pas partie du standard HTML, et MDN note que seul Firefox le prend en charge. Les autres navigateurs l'ignorent et font un rechargement normal. Pour garantir que les visiteurs reçoivent les nouveaux fichiers, versionnez les URL de vos ressources ou définissez des en-têtes Cache-Control adaptés.
Quelle est la différence entre location.reload() et location.href = location.href ?
reload() recharge toujours le document actuel. Assigner href lance une navigation vers cette URL, et quand l'URL contient un #fragment, le navigateur se contente de défiler jusqu'au fragment, donc rien n'est rechargé. Utilisez reload() quand c'est un rechargement que vous voulez.
Comment actualiser une page toutes les 30 secondes ?
Sans script, ajoutez <meta http-equiv="refresh" content="30"> dans le head. Avec un script, setTimeout(() => location.reload(), 30000). Utilisez l'actualisation automatique avec modération : MDN avertit que des rafraîchissements inattendus peuvent désorienter les visiteurs et contredire les recommandations WCAG sur les délais.
Un script peut-il recharger une page d'un autre site ?
Non. Appeler reload sur le Location d'une autre origine lève une DOMException SecurityError, donc un script dans une iframe d'un autre site ne peut pas recharger la page parente, et la page parente ne peut pas la recharger de cette façon.
Comment recharger la page une seule fois ?
Notez que vous avez déjà rechargé, par exemple avec un indicateur dans sessionStorage ou un paramètre de requête comme ?r=1, et vérifiez-le avant d'appeler reload. Sans garde-fou, du code qui recharge au chargement crée une boucle sans fin.
Recharger ou récupérer des données fraîches
Un rechargement complet jette toute la page : le DOM, chaque variable, les menus ouverts, la saisie en cours et généralement la position de défilement. C'est la bonne réinitialisation quand la page est dans un mauvais état ou qu'une nouvelle version doit se charger.
Quand vous avez seulement besoin de nouveaux chiffres sur un tableau de bord, appelez fetch, mettez à jour la partie de la page qui a changé et laissez le reste. C'est plus rapide, consomme moins de données et ne fait pas clignoter l'écran.
Pourquoi un rechargement peut encore afficher d'anciens fichiers
Un rechargement normal laisse le navigateur revalider les fichiers en cache auprès du serveur, mais les fichiers servis avec une longue durée de cache peuvent encore venir directement du cache. Du code qui tente de forcer un rechargement complet depuis JavaScript ne peut pas corriger cela sur tous les navigateurs.
La solution fiable se trouve côté serveur et dans le build : mettez un hash du contenu dans les noms des fichiers de script et de style pour que chaque déploiement obtienne de nouvelles URL, et servez le HTML avec une durée de cache courte ou no-cache pour qu'il pointe toujours vers les derniers fichiers.
Code de rechargement à coller
Un bouton de rechargement
Le gestionnaire de clic appelle le rechargement standard sans argument.
Actualiser à intervalle régulier, seulement quand l'onglet est visible
Les onglets masqués sont ignorés, et un onglet qui revient après l'intervalle se recharge immédiatement.
Recharger exactement une fois
L'indicateur sessionStorage survit au rechargement dans le même onglet, donc le second chargement le saute.
Prévenir avant de recharger s'il reste des modifications non enregistrées
Les navigateurs n'affichent l'avertissement qu'après une interaction avec la page, et utilisent leur propre formulation.
Générateur de code d'actualisation
Choisissez comment et à quelle fréquence la page doit s'actualiser, puis copiez l'extrait.
Méthode
Recharger maintenant
Minuteur JavaScript
Minuteur, onglet visible uniquement
Meta refresh HTML
Toutes les {n} secondes
Extrait
Essayez sur cette page
location.reload()
history.go(0)
Les deux boutons rechargent cette page. Tout ce que vous avez saisi plus haut sera perdu.