Detectar cambio de orientación dentro del iframe multidominio

Question

Tengo una página .jsp que tiene un iframe. El contenido de este iframe está alojado en un dominio separado. En un dispositivo móvil, estoy buscando este iframe para detectar un cambio de orientación y modificar las dimensiones del contenido en consecuencia.

¿Hay alguna manera de agregar un detector de eventos al contenido almacenado en este iframe que detectaría un cambio de orientación?

Si este contenido no estaba dentro de un iframe, y se accede directamente en su lugar, una llamada como: window.addEventListener ('orientationchange', FunctionToBeCalled, false); capta con éxito un cambio de orientación y llama a la función apropiada. Sin embargo, parece que no puedo hacer que esto funcione desde dentro del iframe. He intentado parent.addEventListener, parent.window.addEventListener, top.addEventListener, etc., pero fue en vano.

Por lo que he leído suena como que esta es una llamada entre dominios Tengo una funcionalidad parental muy limitada disponible para mí, ¿estoy condenado al fracaso?

Cualquier ayuda sería muy apreciada. ¡Gracias!

Answer 1

Si posee el código de la ventana principal, puede utilizar los mensajes cruzados para resolverlo. Puede enviar la orientación de la ventana primaria al iframe. Esto debería funcionar también en el escenario de dominio cruzado. Probé esto en iphone 4.3 y android 2.2.

En la ventana padre: inscribirse en los cambios de orientación y transferirlo a la iframe

window.addEventListener("orientationchange", function(){ 
       var iframe = document.getElementById("youriframe").contentWindow; 
       iframe.postMessage({ 
        orientation: window.orientation 
       }, 'http://the.domain.of.the.iframe.com'); 
}, false) 

En el marco flotante: suscribirse a los cambios de orientación de los padres

window.addEventListener("message", function(e){ 
      var newOrientationValue = e.data.orientation; 
      alert(newOrientationValue); // <--- DO your own logic HERE 
}, false) 

mira esto para más detalles : http://html5demos.com/postmessage2