Cómo recargar una página con JavaScript

Publicado el 8 febrero, 2022 por Caronte Studio.  / 4 Comentarios

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!

Función para recargar la página en JavaScript

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.

Recarga automática con JavaScript

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.

Actualizar la página con un botón mediante JavaScript

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" onclick="location.reload()">

Refrescar la página con un enlace mediante JavaScript

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>

Cargar la página empleando window.location.href

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" onclick="mostrar()">
<!--JS-->
<script>
        function mostrar () {
            let url = window.location.href;
            window.alert(url);
        }
</script>

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" onclick="recargar()">
<!--JS-->
<script>
        function recargar () {
            window.location.href = window.location.href;
        }
</script>

Conclusiones

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!