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();
}
