Come posso rilevare quando un iFrame diventa a schermo intero?

Question

Ho un documento che è incorporato nel mio sito utilizzando un iFrame. L'iFrame è un visualizzatore di documenti Box.com. L'iFrame ha il proprio pulsante a schermo intero. Il pulsante a schermo intero si trova all'interno di iFrame, pertanto non è possibile allegare un listener di eventi click al pulsante. Ho aggiunto l'attributo allowfullscreen all'iFrame per consentirgli di andare a schermo intero.

voglio fare qualcosa di simile:

$('iframe').on 'EnterFullScreen',() -> 
    # Run function 

Ma quale evento devo ascoltare, per rilevare quando l'iFrame sta andando a pieno schermo?

Ecco un jsfiddle con il tipo di documento che sto incorporando. L'obiettivo è quello di rilevare quando il documento diventa a schermo intero.

http://jsfiddle.net/Rnvcm

Answer 1

È possibile ascoltare per un cambiamento a schermo intero nella tua pagina padre (quella che ha la iframe):

function changeHandler(e) { 
    // Mode has changed. 
} 

document.addEventListener("fullscreenchange", changeHandler, false); 
document.addEventListener("webkitfullscreenchange", changeHandler, false); 
document.addEventListener("mozfullscreenchange", changeHandler, false); 

Answer 2

Utilizzando gli eventi sottolineato da putvande è ancora possibile associare il proprio enterFullScreen evento:

$(document).on('fullscreenchange mozfullscreenchange webkitfullscreenchange msfullscreenchange', function() { 
    if (document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement) 
    { 
     $(document).trigger('enterFullScreen'); 
    } 
    else 
    { 
     $(document).trigger('leaveFullScreen'); 
    } 
}); 

È possibile utilizzare la sim Pler enterFullScreen evento ormai utilizzando:

$(document).on('enterFullScreen', function(){ 
    // Do stuff 
}); 

Answer 3

Le altre risposte non ha funzionato per me esattamente come descritto in un'applicazione Cordova 4.0.0 (Android 4.1.1) in esecuzione su un Galaxy S4 (5.0.1 Lollipop), ma la seguito:

document.addEventListener("webkitfullscreenchange", function() { 
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) { 
    if (window.screen && typeof window.screen.unlockOrientation === 'function') { 
     window.screen.unlockOrientation(); // Unlock screen orientation 
    } 
    } else { 
    if (window.screen && typeof window.screen.lockOrientation === 'function') { 
     window.screen.lockOrientation('portrait-primary'); // Relock screen orientation 
    } 
    } 
}); 

Sto utilizzando il plug-in Cordova ScreenOrientation per gestire il blocco dell'orientamento in base al rilevamento a schermo intero.