Supongamos que le hemos dado un documento HTML y la tarea es actualizar automáticamente la página web después de un cierto período de tiempo en el navegador web. Predefiniremos un período de tiempo y el navegador actualizará automáticamente la página web.
Ejemplo: está creando un sitio web con actualización automática que debe actualizarse después de un período de tiempo menor. Entonces, en este caso, puede usar la etiqueta meta http-equiv para actualizar la página web. Otra ilustración de esta etiqueta http-equiv es que se puede usar para recargar un sitio web meteorológico que debe actualizarse después de cada pequeño intervalo de tiempo para mostrar los cambios de tiempo por minutos.
Enfoque 1: uno puede actualizar automáticamente la página web usando la metaetiqueta dentro del elemento de encabezado de su HTML usando la propiedad http-equiv. Es una propiedad incorporada con HTML 5. Además, se puede agregar el período de tiempo de la actualización utilizando el atributo de contenido dentro de la etiqueta Meta.
El atributo HTTP equiv se puede usar para simular un encabezado de respuesta HTTP. El atributo es compatible con todos los principales navegadores web, como Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera Mini, etc.
Sintaxis:
<meta http-equiv="refresh" content="10">
Ejemplo:
<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta http-equiv="refresh" content="10"> </head> <body> <h2>Welcome To GFG</h2> <p>The code will reload after 10s.</p> </body> </html>
Salida :
Enfoque 2: usar el método setInterval(): otro método para acceder a la propiedad de actualización automática de la página web es usar el siguiente código JavaScript hasta que se llame a ClearInterval(), setInterval() continuará llamándose a sí mismo continuamente.
Sintaxis:
<script>
function autoRefresh() {
window.location = window.location.href;
}
setInterval('autoRefresh()', 5000);
</script>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Reloading page after 5 seconds
</title>
<script>
function autoRefresh() {
window.location = window.location.href;
}
setInterval('autoRefresh()', 2000);
</script>
</head>
<body>
<h1>Welcome to GeeksforGeeks code</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por neeraj kumar 13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA