I have a document that is embedded in my site by using an iFrame. The iFrame is from Box 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.

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

• javascript
• jquery
• html
• events
• iframe

• Can you not just attach an event to the fullscreen button? $("#goFullScreen").click(function(){......}); – Mark Commented Jun 24, 2014 at 14:27
• The fullscreen button is within the iframe! I can't attach event listeners to buttons within the iFrame I tried. – Nearpoint Commented Jun 24, 2014 at 14:28
• Can you add a fiddle? – Mark Commented Jun 24, 2014 at 14:29
• Yah here it is. The goal is to detect when the iframe goes fullscreen. jsfiddle.net/Rnvcm – Nearpoint Commented Jun 24, 2014 at 14:34
• Except it looks like it does not actually allow the document to go fullscreen in jsfiddle – Nearpoint Commented Jun 24, 2014 at 14:36

3 Answers 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);

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

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.