Script de recarga de la página con javascript

  • Por
Realizamos un script en una página, con Javascript, que hace que se recargue constantemente y asegurando que no se obtiene la página siempre desde la caché.
En algunas ocasiones necesitamos que una página recargue sus contenidos cada cierto tiempo, para mostrar información actualizada a las personas que la visitan. Esto es a veces típico de los servicios que muestran información en tiempo real, según se va produciendo.

Este artículo surge como respuesta a la duda de un visitante que, además, necesitaba que el tiempo que pasase entre cada recarga de la página fuera siempre distinto. Para ello simplemente hacemos que se recargue la página después de un número de segundos aleatorio.

Un tema que además es necesario para que todo funcione correctamente es que la página no se muestre desde la caché del navegador. Sabemos que cuando una página ya se ha solicitado previamente, se queda muchas veces en la caché de nuestros navegadores de modo que, si se vuelve a solicitar, se muestre la copia que tenemos almacenada localmente, en lugar de solicitarse y descargarse desde el servidor de Internet. En estos sistemas de recarga hay que asegurarse que los contenidos no se obtengan desde la caché, para que las actualizaciones se puedan ver correctamente con cada recarga de la página.

La recarga con Javascript

Veamos cómo hemos resuelto todas estas necesidades, en este caso mediante Javascript.

Para empezar, tenemos que obtener un numero aleatorio de segundos, para que la recarga se realice a intervalos irregulares, tal como nos solicitaban.

Para ello vamos a utilizar la siguiente función de cálculo de números aleatorios, que hemos comentado y probado en otros ejemplos relatados en DesarrolloWeb.com.

function aleatorio(inferior,superior){
    numPosibilidades = superior - inferior
   aleat = Math.random() * numPosibilidades
   aleat = Math.floor(aleat)
   return parseInt(inferior) + aleat
}


Llamaremos a la función para obtener un número aleatorio, en este caso entre 5 y 10:

num_aleatorio = aleatorio(5, 10)

Para solucionar el tema de que la página no se muestre desde la caché del navegador vamos a enviarle un parámetro por la URL, así la URL que solicitemos será siempre distinta y nuestro navegador se verá obligado a solicitar la página al servidor cada vez que se recargue. Podríamos haber utilizado otras técnicas como poner en la cabecera del http la orden para que no se guarde en la caché, pero por mi experiencia, esta es la única manera que nos asegura que todos los navegadores van a recargar la página solicitándola siempre al servidor.

Voy a generar un string para enviarlo por parámetro a esta misma página. Como decíamos, el parámetro lo pasaremos por URL. No haremos nada con ese dato, pero como cada vez será distinto, nos asegura que el navegador siempre solicitará al servidor la página, en vez de mostrar otra vez la que tiene en caché. Utilizaremos la fecha y tiempo para generar el dato que cambie siempre.

miFecha = new Date()
dato_url = miFecha.getYear().toString() + miFecha.getMonth().toString() + miFecha.getDate().toString() + miFecha.getHours().toString() + miFecha.getMinutes().toString() + miFecha.getSeconds().toString()


En la variable dato_url guardamos el año, seguido del mes, dia, horas, minutos y segundos. Como todos los datos de fecha, se tienen que extraer desde un objeto date, que creamos con la sentencia new Date(). Luego a este objeto le invocamos diversos métodos para obtener los datos que necesitamos. Los datos se nos devuelven en tipo entero y para concatenarlos como si fueran string, necesitamos aplicarles el método toString(), que tienen todos los objetos de Javascript para convertirlos en cadenas.

Ya sólo queda realizar la recarga propiamente dicha. Para ello tenemos que aplicar un retardo, que conseguiremos con la función setTimeout(), que recibe como primer parámetro la instrucción que se quiere ejecutar y como segundo parámetro, el tiempo en milisegundos que se quiere esperar.

setTimeout("window.location='pagina.html?parametro=" + dato_url + "'", num_aleatorio * 1000)

Si nos fijamos, hemos utilizado window.location para asignar una nueva URL al navegador. Luego hemos utilizado la variable dato_url para pasarla como parámetro. Además, para marcar el retardo entre recargas hemos utilizado la variable num_aleatorio, multiplicada por 1000 para pasar a milisegundos.

Esto es todo. Se puede ver el ejemplo en marcha en este enlace.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Tonatiu Camarillo

06/4/2006
Tambien puedes hacer el refres como indicas y usar el META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" para evitar que se repita la información.<br>
Saludos.

Castro

04/8/2007
esta bien pero como evito de que se pierdan mis datos capturados.

Icaro

16/1/2009
Bastante funcional este script. Muchas Gracias! Me soluciono el prolema que tenia! Muchas Gracias!

Carlos Gamarra

16/6/2011
Y como puedo hacer esto?
Como puedo recargar un index de una web y que se recargue siempre la misma index, gracias por la ayuda perubuss@hotmail.com

Breiner Jose

24/11/2011
script incompleto
por favor colocar la pagina completa como quedaria he probado de muchas maneras y no ha funcionado de ninguna manera.

Breiner Jose

24/11/2011
Aqui les comparto la pagina completa
<html>
<head>
<title>recarga de la página con javascript</title>
</head>

<body>

Queremos que esta página se recarge cada varios segundos.
<br>
Además que la recarga se realice evitando que se vuelva a tomar la página de la caché del navegador


<script languaje=javascript>

//Voy a obtener un numero aleatorio de segundos, para que la recarga se realice a intervalos irregulares
function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.floor(aleat)
return parseInt(inferior) + aleat
}
num_aleatorio = aleatorio(5, 10)
document.write("<p>Voy a recargar esta página pasados " + num_aleatorio + " segundos")

//ahora voy a generar un string para enviarlo por parámetro a esta misma página
//el parámetro lo pasaremos por URL.
//No haremos nada con ese dato, pero como cada vez será distinto, nos asegura que el navegador siempre solocitará al servidor la página, en vez de mostrar otra vez la que tiene en caché
//utilizaremos la fecha y tiempo para generar el dato
miFecha = new Date()
dato_url = miFecha.getYear().toString() + miFecha.getMonth().toString() + miFecha.getDate().toString() + miFecha.getHours().toString() + miFecha.getMinutes().toString() + miFecha.getSeconds().toString()
document.write("<p>El parámetro que pasaré por URL es este: " + dato_url)

//para recargar la página con un retardo utilizaremos la función setTimeout()
//recibe el primer parámetro la instrucción que se quiere ejecutar
//segundo parámetro es el tiempo en milisegundos que se quiere esperar
setTimeout("window.location='pagina_recarga.html?parametro=" + dato_url + "'", num_aleatorio * 1000)

</script>

</body>
</html>

Ronal

21/5/2014
script para recargar la pagina sin cerrar una ventana modal
hola el script que compartiste funciona, me gustaría saber si hay forma de que cuando se actualice no me cierre una ventana modal.