Published on

Rafraîchir une page HTML avec du Javascript

Une fois qu'une page HTML est chargée dans le navigateur, elle est statique au yeux de l'utilisateur. Le DOM est créer une première fois et affiché, pour rendre ce DOM dynamique il faut interagir avec lui en le modifiant. Il y a plusieurs possibilité de fonctionnement pour dynamiser la page avec des données externes, mais la solution la plus simple est de rafraichir totalement la page à un moment donné, c'est à la personne qui va développé la page de choisir ce moment.

Rafraichir une page via du Javascript

Voici la solution la plus simple pour rafraichir une page HTML en Javascript, en une seule ligne de code.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Je reload en boucle</title>
  <script>
    window.location.reload()
  </script>
</head>

Au chargement de la page, le navigateur va interpreter la ligne de Javascript et reload le navigateur. La problèmatique dans cet exemple est qu'il est impossible d'utiliser la page car elle ne fait que de se rafraichir sans grande raison. Il faut donc ajouter des conditions pour éviter que l'utilisateur aille voir ailleur. Cette pratique est également mauvaise aux yeux de Google qui ne va pas vous référencer correctement sur son moteur de recherche car il estime que cette page n'a pas d'intéret pour l'internaute.

Comment rafraichir une page HTML au bout d'une minute

Partons du principe ou vous souhaitez que n'importe quel utilisateur de votre site dispose d'une version à jour (moins de 1 minute de délais), voici comment déclancher un rafraichissement de la page au bout d'une minute.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Je reload au bout d'une minute la page</title>
  <script>
    setTimeout(() => {
      window.location.reload()
    }, '60000')
  </script>
</head>

Cet exemple à déjà plus de sens car on va rafraichir la page une minute après que l'utilisateur soit arrivé sur la page. La notion de temps est bien évidement varible, vous pouvez ajuster le temps en milliseconde, dans cette exemple 60000ms correspondant à 1 minutes.