Comunicación entre iframes (js)

Cómo enviar datos desde un contenedor a un iframe.

Manet

archivado en: JavaScript / 1 mayo, 2014

Para comunicar un iframe con la página madre que lo contiene es necesario recurrir al API Window.postMessage, que consiste en lo siguiente. En la página normal se envían los datos con esta función:

eliframe.postMessage(message, targetOrigin);

Donde message es cualquier dato (una cadena, un jasonako...) y targetOrigin el iframe que lo recibirá: póngase '*', si no se quiere especificar.

Y en el iframe colocas una escucha que se activa al recibir los datos. Esto se entiende bien con un ejemplo.

En el trabajo hemos preparado una single page application (SPA) que va dentro de otra SPA; es decir, un tinglado en JavaScript y HTML que funciona dentro de un iframe. Como el cálculo de las dimensiones de la pantalla y el evento que detecta el cambio de rotación van mal dentro de un iframe en algunas tablets (de la serie, la madre que parió a las samsung), lo lanzamos desde fuera, desde el contenedor del iframe:

var iframe = document.getElementById('iframe').contentWindow;

window.addEventListener('orientationchange', function() {

var altoDispositivo = document.documentElement.clientHeight;

var anchoDispositivo = document.documentElement.clientWidth;

var mensaje = altoDispositivo + '-' + anchoDispositivo;

iframeNLD.postMessage({message: mensaje },'*');

});

Y ya en el iframe, colocamos una escucha que lanza una función para repintar las cosas en función del ancho y el alto del dispositivo.

window.addEventListener("message", recepcionResize, false);

function recepcionResize(event) {

var temporal = event.data.message;

temporal = temporal.split("-");

altoDispositivo = parseInt(temporal[0]);

anchoDispositivo = parseInt(temporal[1]);

resizeTablet.cambiaEscenario();

}

|| Tags: , , ,

valoración de los lectores sobre Comunicación entre iframes (js)

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.8 sobre 5 (6 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.