Recargar la página con JavaScript: location.reload()
Recargar una página con JavaScript
JavaScript location.reload(): cómo recargar una página bien | We.Inc
Recarga la página con location.reload(), compárala con history.go(0), replace y meta refresh, genera código de recarga temporizada y descubre qué hace realmente reload(true).
Usa location.reload() para recargar la página actual, exactamente como hace el botón de recargar del navegador. No recibe argumentos estándar. La forma antigua reload(true), pensada para saltarse la caché, es un parámetro no estándar que MDN indica como soportado solo en Firefox, así que los demás navegadores ignoran el true. history.go(0) también recarga.
Formas de recargar o mover la página
Código
Qué pasa
¿Añade una entrada al historial?
location.reload()
Recarga la URL actual
No
history.go(0) o history.go()
Mismo resultado que location.reload()
No
location.replace(url)
Carga url y sustituye la entrada actual
No, Atrás se salta la página anterior
location.assign(url)
Carga url como un paso nuevo
Sí
<meta http-equiv="refresh" content="30">
Recarga a los 30 segundos, sin necesidad de script
No
Recargar es una línea de código, pero los motivos para hacerlo varían: obtener datos nuevos, reiniciar un estado atascado, refrescar un panel con un temporizador o forzar una versión nueva del sitio. Esta guía muestra la llamada estándar, lo que hacen de verdad las variantes antiguas y cómo evitar la recarga por completo cuando lo único que necesitas es obtener datos frescos.
Elige un método de recarga y un intervalo en el generador.
El cuadro de código se actualiza con un fragmento listo para pegar para ese método.
Usa los botones para probar location.reload() y history.go(0) en esta página. Ambos la recargan.
Lee la sección sobre la caché antes de confiar en una recarga para mostrar archivos recién desplegados.
location.reload() no devuelve nada y el código posterior puede seguir ejecutándose un momento antes de que la página se descargue, así que ponlo al final.
Antes de recargar una página con un formulario, avisa de los datos sin guardar con un listener de beforeunload; el navegador muestra su propio mensaje genérico, no el tuyo.
Una recarga temporizada en una pestaña oculta malgasta datos y batería. Comprueba document.visibilityState y sáltate la recarga mientras la pestaña está en segundo plano.
En una single page app, volver a pedir los datos o reiniciar el estado suele ser más rápido y conserva la posición de scroll, lo escrito y el foco.
Preguntas frecuentes
¿location.reload(true) borra la caché?
No de forma fiable. El argumento forceGet no forma parte del estándar HTML, y MDN indica que solo Firefox lo soporta. Los demás navegadores lo ignoran y hacen una recarga normal. Para asegurarte de que la gente recibe archivos nuevos, pon versión a las URLs de tus recursos o configura cabeceras Cache-Control adecuadas.
¿Qué diferencia hay entre location.reload() y location.href = location.href?
reload() siempre recarga el documento actual. Asignar href inicia una navegación a esa URL, y cuando la URL contiene un #fragment el navegador solo hace scroll al fragmento, así que no se recarga nada. Usa reload() cuando lo que quieres es recargar.
¿Cómo recargo una página cada 30 segundos?
Sin script, añade <meta http-equiv="refresh" content="30"> al head. Con script, setTimeout(() => location.reload(), 30000). Usa la recarga automática con moderación: MDN advierte que las recargas inesperadas pueden desorientar a la gente y chocar con las pautas de WCAG sobre tiempos.
¿Puede un script recargar una página de otro sitio?
No. Usar reload sobre el Location de otro origen lanza una DOMException SecurityError, así que un script dentro de un iframe de otro sitio no puede recargar la página padre, y la página padre tampoco puede recargarlo de esa forma.
¿Cómo recargo la página una sola vez?
Marca que ya recargaste, por ejemplo con un flag en sessionStorage o un parámetro de consulta como ?r=1, y compruébalo antes de usar reload. Sin esa protección, un código que recarga al cargar crea un bucle infinito.
Recargar frente a obtener datos frescos
Una recarga completa tira toda la página: el DOM, cada variable, los menús abiertos, lo escrito y normalmente la posición de scroll. Es el reinicio correcto cuando la página está en mal estado o debe cargarse una versión nueva.
Cuando solo necesitas números nuevos en un panel, usa fetch, actualiza la parte de la página que cambió y deja el resto. Es más rápido, consume menos datos y no hace parpadear la pantalla.
Por qué una recarga puede seguir mostrando archivos antiguos
Una recarga normal deja que el navegador revalide con el servidor los archivos en caché, pero los archivos servidos con una vida de caché larga pueden seguir saliendo directamente de la caché. El código que intenta forzar una recarga completa desde JavaScript no puede arreglar eso en todos los navegadores.
La solución fiable está en el servidor y en el build: pon un hash del contenido en los nombres de los archivos de scripts y estilos para que cada despliegue tenga URLs nuevas, y sirve el HTML con una vida de caché corta o sin caché para que siempre apunte a los archivos más recientes.
Código de recarga para pegar
Un botón de recargar
El manejador de clic usa la recarga estándar sin argumentos.
Recargar con un temporizador, pero solo con la pestaña visible
Las pestañas ocultas se saltan, y una pestaña que vuelve después del intervalo se recarga en el acto.
Recargar exactamente una vez
El flag de sessionStorage sobrevive a la recarga en la misma pestaña, así que la segunda carga se la salta.
Avisar antes de recargar con cambios sin guardar
Los navegadores solo muestran el aviso después de que la persona haya interactuado con la página, y usan su propio texto.
Generador de código de recarga
Elige cómo y cada cuánto debe recargarse la página, y copia el fragmento.
Método
Recargar ahora
Temporizador de JavaScript
Temporizador, solo con la pestaña visible
Meta refresh de HTML
Cada {n} segundos
Fragmento
Pruébalo en esta página
location.reload()
history.go(0)
Ambos botones recargan esta página. Se perderá todo lo que hayas escrito arriba.