How can I detect when an iFrame goes fullscreen?

Question

I have a document that is embedded in my site by using an iFrame. The iFrame is from Box.com document viewer. The iFrame has its own built in fullscreen button. The fullscreen button is within the iFrame so I cannot attach a click event listener to the button. I added the attribute allowfullscreen to the iFrame to allow it to go fullscreen.

I want to do something like this:

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

But what event do I have to listen to, to detect when the iFrame is going fullscreen?

Here is a jsfiddle with the type of document I am embedding. The goal is to detect when the document goes fullscreen.

http://jsfiddle.net/Rnvcm

Answer 1

Using the events pointed out by putvande you can still bind your own enterFullScreen event:

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

You can use the simpler enterFullScreen event now using:

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

Answer 2

The other answers did not work for me exactly as described in a Cordova 4.0.0 (Android 4.1.1) app running on a Galaxy S4 (5.0.1 Lollipop) but the following does:

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

I am using the Cordova ScreenOrientation plugin to handle orientation locking based on fullscreen detection.

Answer 3

You can listen for a fullscreen change in your parent page (the one having the iframe):

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

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