Interfaz javascript y problema con settimeout

kiko's · #1 (**permalink**) 25/10/2011, 11:38

Hola amigos,

Estoy bastante pez en javascript y un amigo me pidió ayuda para crear una especie de "widget" que mostrara la previsión meteorológica de los próximos tres días. He intentado crear una especie de "interfaz" javascript entre el código del widget y un archivo PHP que contiene la lógica que se encarga de leer los datos de la AEMET(www.aemet.es). Así está estructurado.

La página que quiere visualizar el widget contendrá el siguiente código:

Código HTML:

<script type="text/javascript" src="weather.js"></script>
<script type="text/javascript">
 var options = {
     aemet_id: '35015',
     lang: 'es'
 }
 weatherLoad(options);
</script>

options contendrá una serie de parámetros que el usuario podrá pasar de manera opcional.

Este código llama a una función contenida en weather.js, que se encarga de coger los parámetros pasados por el usuario y crear un iframe que llamará a un archivo(weather.php) al cual le pasará los parámetros indicados anteriormente.

Código HTML:

function weatherLoad(options){
  var _AEMET_ID        = ''     ;
  var _lang            = 'es'   ;
  var _backgroundColor = '%23000' ;
  var _font            = 'Arial';
  var _fontSize1       = '29px' ;
  var _fontSize2       = '16px' ;
  var _fontSize3       = '15px' ;
  var _iconSize        = '70px' ;
  var _width           = '575px';
  var _height          = '53px' ;
  var _refresh         =  60    ;
  var _timeScroll      =  4     ;
  
  if(typeof options.aemet_id != "undefined")
    _AEMET_ID = options.aemet_id;
  if(typeof options.lang != "undefined")
    _lang = options.lang;
  if(typeof options.backgroundColor != "undefined")
    _backgroundColor = options.backgroundColor;
  if(typeof options.font != "undefined")
    _font = options.font;
  if(typeof options.fontSize1 != "undefined")
    _fontSize1 = options.fontSize1;
  if(typeof options.fontSize2 != "undefined")
    _fontSize2 = options.fontSize2;
  if(typeof options.fontSize3 != "undefined")
    _fontSize3 = options.fontSize3;
  if(typeof options.iconSize != "undefined")
    _iconSize = options.iconSize;
  if(typeof options.width != "undefined")
    _width = options.width;
  if(typeof options.height != "undefined")
    _height = options.height;
  if(typeof options.refresh != "undefined")
    _refresh = options.refresh;
  if(typeof options.timeScroll != "undefined")
    _timeScroll = options.timeScroll;
 
  document.write("<iframe id=\"weather_iframe\" name=\"weather_iframe\" src=\"http://external.netflie.es/vedadovision/weather.php?AEMET_ID="+_AEMET_ID+"&lang="+_lang+"&backgroundColor="+_backgroundColor+"&font="+_font+"&fontSize1="+_fontSize1+"&fontSize2="+_fontSize2+"&fontSize3="+_fontSize3+"&iconSize="+_iconSize+"&width="+_width+"&height="+_height+"&timeScroll="+_timeScroll+"&aleatorio="+aleatorio+"\" width=\""+_width+"\" height=\""+_height+"\" frameborder=\"0\" scrolling=\"no\"></iframe>"); 
  
  // Refresh page
  setTimeout('location.reload()', 1000*60*_refresh)
}

Vale... Y el problema viene en este punto. Este widget estará activo en una pantalla de televisión las 24 horas del día, los 7 días de la semana, los 365 días del año bla bla bla... Y la previsión meteorológica se actualiza diariamente. Por ello hago un setTimeout('location.reload()', 1000*60*_refresh) que se ejecuta cada 24 horas. El problema es el "location.reload()" ya que me recarga no sólo el archivo weather.js, sino también la página que lo contiene, y esto no me interesa, sólo me interesa recargar el archivo weather.js, o para ser más correctos: sólo me interesaría cargar ese iframe que llama al archivo weather.php y contiene la lógica del programa.

También había intentado con un:

Código HTML:

function weatherLoad(options){
...
  function iframe(){
      document.write("<iframe id=\"weather_iframe\" name=\"weather_iframe\" src=\"http://external.netflie.es/vedadovision/weather.php?AEMET_ID="+_AEMET_ID+"&lang="+_lang+"&backgroundColor="+_backgroundColor+"&font="+_font+"&fontSize1="+_fontSize1+"&fontSize2="+_fontSize2+"&fontSize3="+_fontSize3+"&iconSize="+_iconSize+"&width="+_width+"&height="+_height+"&timeScroll="+_timeScroll+"&aleatorio="+aleatorio+"\" width=\""+_width+"\" height=\""+_height+"\" frameborder=\"0\" scrolling=\"no\"></iframe>");
    }

   setTimeout("iframe()", tiempo);
}

pero me dice que la función iframe() no está definida.

También he intentado poner la función iframe() fuera de la función weatherLoad(), pero la página se queda en blanco y es como no se terminara de cargar nunca.

Resumiendo: necesito pasar a través de javascript una serie de parámetros a un iframe que llamar a un archivo PHP al cual le pasará por el método GET estos parámetros.

Espero haberme explicado.

Pueden ver el código en:
http://external.netflie.es/vedadovision/prueba.html

Gracias por su tiempo.

IsaBelM · #2 (**permalink**) 25/10/2011, 13:41

esto es lo que he conseguido. he usado poo

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<script type="text/javascript">
function weatherLoad(options){

// Refresh page
this.intervalo = function(){
document.getElementById('fm').innerHTML = '<iframe id="weather_iframe" name="weather_iframe" src="http://external.netflie.es/vedadovision/weather.php?AEMET_ID=35015&lang=es&backgro undColor=%23000&font=Arial&fontSize1=29px& amp;fontSize2=16px&fontSize3=15px&iconSize =70px&width=575px&height=53px&timeScro ll=4&aleatorio=9" width="575px" height="53px" frameborder="0" scrolling="no"></iframe>';
//document.write('<iframe id="weather_iframe" name="weather_iframe" src="http://external.netflie.es/vedadovision/weather.php?AEMET_ID=35015&lang=es&backgro undColor=%23000&font=Arial&fontSize1=29px& amp;fontSize2=16px&fontSize3=15px&iconSize =70px&width=575px&height=53px&timeScro ll=4&aleatorio=9" width="575px" height="53px" frameborder="0" scrolling="no"></iframe>');
}
}

var obj = new weatherLoad();
window.onload = setInterval(function() {obj.intervalo()}, 10000);
</script>
</head>

<body>
<div id="fm"></div>
</body>
</html>

kiko's · #3 (**permalink**) 25/10/2011, 14:10

Hola

No entiendo muy bien... ¿Ese código va en weather.js? En weather.js sólo tengo javascript. Y en http://external.netflie.es/vedadovision/prueba.html sería una página externa a mi control, no podría definir nuevos divs ni código html. Los únicos archivos que yo puedo tocar son weather.js y weather.php.

He intentado hacer varias formas, pero siempre me falla el settimeout, se queda la página principal(la que hace la llamada al widget) como recargando constantemente. Incluso el Firebug deja de visualizar datos de la página jeje

Gracias por tu tiempo.

IsaBelM · #4 (**permalink**) 25/10/2011, 14:29

usa document.body.innerHTML

weather.js

Cita:

archivo.html

Cita:

kiko's · #5 (**permalink**) 28/10/2011, 05:59

Hola

Pues ninguna de las soluciones me ha funcionado. Al final lo resolví escribiendo en el archivo WEATHER.PHP la siguiente línea:
setTimeout('location.reload()', 1000)

Pensaba que al recargar el archivo php(directamente desde el propio archivo) se perderían las variables pasadas por el método GET, pero se ve que no :S

Gracias por su tiempo.
Saludos.