How to detect when a page exits fullscreen?

Question

I'm creating a 3D multiplayer game with Three.js, where players can join various existing games. Once "play" is clicked, the renderer is appended to the page and fullscreens. This works great, but the problem is that, when I exit the fullscreen, it still stays appended. I'd like to remove it, but I don't know when!

So, basically, I'm looking for an event that says "this element exited fullscreen".

This is how I append the renderer to the page:

container = document.getElementById('container');
document.body.appendChild(container);

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( WIDTH, HEIGHT);
container.appendChild( renderer.domElement );

This if how I fullscreen it:

THREEx.FullScreen.request(container); 
renderer.setSize(screen.width, screen.height);

Also, is there a way to stop that annoying header from appearing whenever someone points his mouse to the top of the page? And, I guess I can just prevent escape from doing what it does (exiting fullscreen) in Firefox and Chrome with preventDefault?

EDIT:

The "fullscreenchange" event is indeed fired, but it has different names under different browsers. For example, on Chrome it's called "webkitfullscreenchange", and on Firefox it's "mozfullscreenchange".

Solution 1

The Fullscreen spec specifies that the "fullscreenchange" (with the appropriate prefix) event is fired on the document any time the fullscreen state of the page changes, that includes going into and out of full screen. Inside that event you can check document.fullScreenElement to see if the page is fullscreen or not. If it's fullscreen the property will be non-null.

Check out MDN for more details.

As for your other questions: No, there is no way to prevent Esc from exiting fullscreen. That's the compromise that was made to ensure that the user always has control over what their browser is doing. The browser will never give you a way to prevent users from exiting fullscreen. Period.

As for Firefox being slower at rendering than Chrome, I can assure you that for most practical purposes it's not. If you're seeing a large difference in performance between the two browsers that probably means your javascript code is the bottleneck, not the GPU.

Solution 2

Here's how I did it:

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)
 {
  // Run code on exit
 }
}

Supports Opera, Safari, Chrome with webkit, Firefox/Gecko with moz, IE 11 with MSFullScreenChange, and will support the actual spec with fullscreenchange once it's been successfully implemented in all of the browsers. Obviously, Fullscreen API is only supported in the modern browsers, so I did not provide attachEvent fallbacks for older versions of IE.

Solution 3

API for browsers changed.

For example: there is no document.webkitIsFullScreen in Chrome. This is what worked for me:

document.addEventListener('fullscreenchange', onFullScreenChange, false);
document.addEventListener('webkitfullscreenchange', onFullScreenChange, false);
document.addEventListener('mozfullscreenchange', onFullScreenChange, false);

function onFullScreenChange() {
  var fullscreenElement =
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement;

  // if in fullscreen mode fullscreenElement won't be null
}

Solution 4

i'm using John Dyer's code, integrated with Toni, and Yannbane's comments to create a central handler, and adding multiple listeners to call it:

   var changeHandler = function(){                                           
      //NB the following line requrires the libary from John Dyer                         
      var fs = window.fullScreenApi.isFullScreen();
      console.log("f" + (fs ? 'yes' : 'no' ));                               
      if (fs) {                                                              
        alert("In fullscreen, I should do something here");                  
      }                                                                      
      else {                                                                 
        alert("NOT In fullscreen, I should do something here");              
      }                                                                      
   }                                                                         
   document.addEventListener("fullscreenchange", changeHandler, false);      
   document.addEventListener("webkitfullscreenchange", changeHandler, false);
   document.addEventListener("mozfullscreenchange", changeHandler, false);

This is only tested in Moz 12.

Please feel free to expand

Solution 5

I slightly changed Alex W's code to make events fire on fullscreen exits only. Tested in Firefox 53.0, Chrome 48.0, and Chromium 53.0:

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (document.webkitIsFullScreen === false)
 {
  ///fire your event
 }
 else if (document.mozFullScreen === false)
 {
  ///fire your event
 }
 else if (document.msFullscreenElement === false)
 {
  ///fire your event
 }
}  

View more solutions

Comments

[corazza]

Thanks! Although, I doubt it has anything to do with my code, it's pretty simple...

[corazza]

Hey @Toji, I've just tried this: document.addEventListener("fullscreenchange", function(){console.log("f");}, false);, but it doesn't seem to work!

[pr3sidentspence]

Yeah, sorry. I should have been clearer on that point. That was why I said "with the appropriate prefix."

[ErichBSchulz]

@vsync - simply replace the alert statements with your own code

[Admin]

it will fire if i fullscreen but it should triggered if i close or exit the fullscreen

[Mark Odey]

This didn't work for me. Tested in firefox on ubuntu.

[pragmar]

Firefox has the result of a non-fullscreen document.fullscreenElement as undefined, resulting in !== null always being true.

[Nisse Engström]

Shouldn't there be a test for document.fullscreenElement?

[Ĭsααc tիε βöss]

This is the exact correct answer for this question."detecting fullscreen exit"

[miny1997]

For me neither. Chrome 58, Win10.

[John]

People, please stop up-voting lazy answers. "Someone else said something valid." is not a valid answer.

[Ahmad Behzadi]

I changed if statement to this if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) to detect exitting from fullscreen

[Per Lundberg]

Thanks @AhmadBehzadi, I edited this answer to use your approach which works better.