Comment actualiser automatiquement les pages Web à intervalles réguliers ?-tutoriel CSS-php.cn

Comment actualiser automatiquement les pages Web à intervalles réguliers ?

王林

Libérer： 2024-02-21 15:27:18

avant

3218 Les gens l'ont consulté

Comment actualiser automatiquement les pages Web à intervalles réguliers ?

Nous pouvons actualiser automatiquement la page Web en utilisant la balise "meta" avec l'attribut "http-equiv", ou en utilisant l'API du navigateur setInterval(). Il existe certains cas d'utilisation pour actualiser automatiquement un site Web. Par exemple, lors de la création d'une application Web de recherche météo, nous pouvons souhaiter actualiser notre site Web après un intervalle défini afin de montrer à l'utilisateur des données météorologiques presque précises pour un emplacement donné.

Jetons un coup d'œil aux deux méthodes ci-dessous pour savoir comment configurer un site Web à actualisation automatique.

Méthode 1

Dans cette méthode, nous utiliserons l'attribut "http-equiv" de la balise "meta" pour actualiser notre application Web après un intervalle spécifique passé dans l'attribut "content". La spécification HTML5 nous fournit des balises méta par défaut.

Syntaxe

<meta http-equiv="refresh" content="n">

Copier après la connexion

Le "n" ici est un entier positif, indiquant le nombre de secondes pour actualiser la page.

Exemple

Dans cet exemple, nous utiliserons l'attribut "http-equiv" de la balise "meta" pour actualiser notre application web toutes les 2 secondes.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatic Refresh a web page in fixed time?</title>
   <meta http-equiv="refresh" content="2">
</head>
<body>
   <h3>How to Automatic Refresh a web page in fixed time?</h3>
</body>
</html>

Copier après la connexion

Méthode 2

Dans cette méthode, nous utiliserons l'API "setInterval()" qui nous est fournie par le navigateur, qui nous permet d'exécuter un morceau de code après un certain temps, les deux étant passés en paramètres à l'API du navigateur.

Syntaxe

setInterval(callback_fn, time_in_ms)

Copier après la connexion

"setInterval()" a 2 paramètres, le premier est la fonction de rappel qui se déclenche après le délai, le second est le délai fourni en millisecondes.

Exemple

Dans cet exemple, nous utiliserons l'API du navigateur « setInterval() » pour actualiser notre application Web toutes les 2 secondes.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to Automatic Refresh a web page in fixed time?</title>
</head>
<body>
   <h3>How to Automatic Refresh a web page in fixed time?</h3>
   <script>
      window.onload = () => {
         console.clear()
         console.log(&#39;page loaded!&#39;);
         setInterval(() => {
            window.location = window.location.href;
         }, 2000)
      }
   </script>
</body>
</html>

Copier après la connexion

Conclusion

Dans cet article, nous avons appris comment actualiser automatiquement notre application Web après une heure fixe en utilisant deux méthodes différentes, HTML5 et JavaScript. Dans la première méthode, nous utilisons l'attribut "http-equiv" de la balise "meta", et dans la seconde méthode, nous utilisons l'API du navigateur "setInterval".

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!