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".

Answer 1

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.

Answer 2

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.