rilevare il cambiamento dell'orientamento dall'interno dei domini iframe

Question

Così ho una pagina di .jsp che ha un iframe in esso. Il contenuto di questo iframe è ospitato in un dominio separato. Su un dispositivo mobile, sto cercando questo iframe per rilevare un cambiamento di orientamento e modificare di conseguenza le dimensioni del contenuto.

Esiste un modo per aggiungere un listener di eventi per il contenuto memorizzato all'interno di questa iframe che rilevare un cambiamento di orientamento?

Se questo contenuto non si trova all'interno di un iframe e accede direttamente, invece, una chiamata come: window.addEventListener ('orientationchange', FunctionToBeCalled, false); rileva correttamente un cambiamento di orientamento e chiama la funzione appropriata. Tuttavia, non riesco a farlo funzionare dall'interno dell'iframe. Ho provato parent.addEventListener, parent.window.addEventListener, top.addEventListener, ecc. Ma senza successo.

Da quello che ho letto che suona come poiché si tratta di una chiamata cross-domain Ho funzionalità genitore molto limitato a disposizione per me, sono io destinato a fallire?

Qualsiasi aiuto sarebbe molto apprezzato. Grazie!

Answer 1

Se si possiede il codice della finestra padre è possibile utilizzare messsages documenti incrociati per risolvere questo. È possibile inviare l'orientamento dalla finestra principale all'iframe. Questo dovrebbe funzionare anche nello scenario cross domain. L'ho provato su iPhone 4.3 e Android 2.2.

Nella finestra padre: registro per le modifiche di orientamento e di trasferirlo al iframe

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

Nella iframe: iscriviti ai cambiamenti di orientamento dal genitore

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

Check this out per maggiori dettagli : http://html5demos.com/postmessage2