Comunicación entre escenas en espacios HTMLIframe

En el siguiente ejemplo contamos con una escena “madre” que contiene dos escenas “hijas” ubicadas cada una de ellas en un espacio HTMLIframe. Cada hija manda a la madre los valores que modifica y esta última se encarga de mantener actualizadas a las hijas. Ello se logra mediante las funciones id.set(variable,valor) e id.update(), la primera asigna a la variable el valor indicado y la segunda actualiza. Van precedidas del prefijo que indica el id del espacio o bien puede indicarse parent para la escena “madre”. Puede descargar esta escena desde este enlace.

El esquema de esta escena es el siguiente:

  1. Una escena madre incluida en la página denominada madre.html que incluye:
    • Dos espacios HTMLIframe denominados con los identificadores H1 y H2 y que abren respectivamente las páginas hija1.html e hija2.html.
    • En el algoritmo CALCULOS se especifica H1.set(‘var2’,var2);H1.update();H2.set(‘var1’,var1);H2.update();
  2. En la página hija1.html una escena que incluye:
    • Un control var1 con una acción calcular que especifica parent.set(‘var1’,var1);parent.update()
    • Dos gráficos tipo texto que muestran el valor de las variables var1 y var2
  3. En la página hija2.html una escena que incluye:
    • Un control var2 con una acción calcular que especifica parent.set(‘var2’,var2);parent.update()
    • Dos gráficos tipo texto que muestran el valor de las variables var1 y var2

Así pues el esquema lógico-funcional es el siguiente:

a) Si se cambia el valor del control var1 en la escena hija 1, la acción calcular parent.set(‘var1’,var1), asigna a la variable denominada var1 en la escena madre (parent) el valor del control var1 de la escena hija 1. Entre comillas simples es el identificador de la variable a actualizar y sin comillas la que actualiza. En este caso, se le ha dado el mismo id con objeto de identificar con el mismo nombre a esa variable en todos los contextos que se consideran, pero pueden ponerse nombres diferentes. Posteriormente en esa misma acción calcular se realiza la actualización de la variable var1 en la escena madre con la función parent.update()

b) En la escena madre, el algoritmo CALCULOS, al ejecutar H2.set(‘var1’,var1) asigna a la variable var1 (escrita entre comillas simples) del espacio H2 el valor actual de la variable var1 de esta escena madre. De nuevo estamos usando por comodidad el mismo nombre para identificar a las variables que intervienen en diferentes contextos. Con H2.update() se efectúa la actualización en el espacio H2 de la variable var1.

c) La escena hija2.html muestra el valor actual de la variable var1, que después de la actualización realizada en el paso anterior es el valor procedente de la escena madre y el de ésta el procedente de la escena hija1.

De manera análoga se procede para pasar el valor del control var2 de la escena hija 2 a la escena madre y de ésta a la escena hija1.

Comentarios Haz un comentario

  1. Juan Salvador Madrigal Muga /

    Parece que el enlace para descargar la escena “madre” está roto.

    1. José R Galo Sánchez / Autor/a del artículo

      Gracias Juan. Ya está corregido ese enlace para su descarga.

Haz un comentario