Si quieres saber cómo recargar una página con JavaScript, te lo explico en este artículo. JavaScript es un lenguaje muy versátil que permite llevar a cabo una infinidad de funcionalidades sobre un sitio web. En nuestra agencia de diseño web, lo empleamos habitualmente. En este caso, te muestro cómo programar una actualización de página en distintas situaciones, de forma que puedas recargar la página automáticamente o como consecuencia de una acción del usuario.
¡Empecemos!
Lo primero que debes saber es la función que implementa JavaScript para refrescar la página, se trata de la siguiente: location.reload(). Este método se encarga de recargar la URL actual, se trata de la misma acción que realizan los navegadores al pulsar el botón de refrescar.
Para emplear esta función en tu sitio web, debes especificar un evento que la desencadene asociado a un elemento de la página. Pongamos un ejemplo. Imagina que tu página tiene un botón que sirve para recargar la página, cuyo código HTML es el siguiente:
<button id="refresh">Recargar</button>Para hacer que el botón pueda recargar la página, es posible almacenar el elemento en una variable y después asignarle un evento. Una vez definido el evento, se añade la función para recargar la página mediante JavaScript:
let refresh = document.getElementById('refresh');
refresh.addEventListener('click', _ => {
location.reload();
})Debes tener en cuenta que está función recarga la página actual sin la caché del navegador, de forma que realiza la misma acción que lleva a cabo el atajo de teclado Ctrl + F5.
Es posible emplear la función anterior para programar una recarga automática de la página. Para ello, deberemos emplearla junto con la función setInterval(). Para ello, insertaremos la función location.reload() como primer parámetro de la función setInterval(), mientras que como segundo parámetro introduciremos los milisegundos que deben pasar hasta que se recargue la página.
Por ejemplo, empleando el siguiente código JavaScript podemos conseguir que la página se recargue automáticamente cada minuto:
setInterval("location.reload()",60000);Para saber más sobre la función setInterval(), te recomiendo consultar la documentación de MDN Web Docs.
También puedes emplear un input de tipo button para añadirle el evento onclick junto con la función location.reload(). Por ejemplo, podrías implementar un botón que recargue la página haciendo uso de la siguiente línea de código:
<input type="button" value="Recargar" >Por último, es posible crear un enlace para recargar la página y definir la función de recarga de página en su ruta. En el código que se expone a continuación te muestro como:
<a href="javascript:location.reload()">Recargar</a>Por último, existe otro método para refrescar una página web empleando JavaScript. Se trata de la propiedad window.location.href, la cual devuelve la URL actual de una página. Por ejemplo, esta propiedad se puede utilizar para mostrar la URL de la página actual mediante una alerta. En el ejemplo siguiente, te muestro el código HTML y JavaScript necesario para crear un botón que muestre la URL de la página:
<!--HTML-->
<input type="button" value="Mostrar URL" >Pues bien, modificando la función anterior es posible tanto hacer que el botón recargue la página actual o que redirija al usuario a otra página. Para ello, debes reasignar el valor de window.location.href. De esta manera, definirás de nuevo el valor de la URL actual; si le asignas el mismo valor que hasta ahora, la página se recargará, pero también le puedes asignar otro valor y llevar al usuario a otra página.
En este caso, para recargar la página haciendo uso de esta propiedad podrías emplear el siguiente código:
<!--HTML-->
<input type="button" value="Recargar" >Ya sabes cómo recargar una página con JavaScript de diferentes maneras, empleando distintas funciones y propiedades de JavaScript. Espero que te haya servido de ayuda. Si quieres aportar algo, por favor, no dudes en dejarme un comentario en esta publicación.
Si te interesan las entradas como esta, te recomiendo visitar nuestra sección de artículos sobre programación web, donde podrás encontrar todo tipo de contenido relacionado con la temática.
¡Te espero en el siguiente artículo!
En este artículo, aprenderás qué es el Lazy Loading y cómo implementarlo fácilmente en tu… Leer más
En esta guía práctica, te explicamos qué es el presupuesto de rastreo, por qué es… Leer más
¿Alguna vez te has encontrado con un mensaje que te invita a actuar, ya sea… Leer más
Una de las preguntas más comunes entre los desarrolladores web que comienzan a usar JavaScript… Leer más
Descubre qué es y para qué sirve la preimpresión digital para conseguir una buena impresión… Leer más
Ampliamos información para las redes sociales. Descubre cómo gestionar correctamente los consentimientos necesarios en las… Leer más
Ver comentarios
Me ha funciona perfecto.
Gracias.
Qué bien que te haya servido. Gracias por la lectura!
Hola, perfecto todas tus ideas son buenas las he probado todas en varias ocasiones.
Gracias por compartir.
Genial, nos encanta saber que ha sido útil el post. Gracias a ti por tu lectura y aportación.