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

You could add a listener for page resize after you go fullscreen. — Belladonna, May 22 '12 at 16:25
possible duplicate of [How to detect if user has enabled full screen in browser](http://stackoverflow.com/questions/5617963/how-to-detect-if-user-has-enabled-full-screen-in-browser) — Diodeus - James MacFarlane, May 22 '12 at 17:09

score 103 · Answer 1 · edited Feb 09 '22 at 13:40

103

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.

edited Feb 09 '22 at 13:40

Le Droid

4,534
3
37
32

answered Sep 16 '14 at 19:03

Alex W

37,233
13
109
109

8

it will fire if i fullscreen but it should triggered if i close or exit the fullscreen – Oct 12 '15 at 19:02
3

Firefox has the result of a non-fullscreen document.fullscreenElement as `undefined`, resulting in `!== null` always being true. – pragmar Sep 15 '16 at 14:12
18

I changed `if` statement to this `if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)` to detect exitting from fullscreen – Ahmad Behzadi Jan 27 '18 at 10:00
Thanks @AhmadBehzadi, I edited this answer to use your approach which works better. – Per Lundberg Feb 06 '18 at 20:39

score 49 · Accepted Answer · answered May 22 '12 at 17:34

49

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.

answered May 22 '12 at 17:34

Toji

33,927
22
105
115

Thanks! Although, I doubt it has anything to do with my code, it's pretty simple... – corazza May 23 '12 at 11:59
4

Hey @Toji, I've just tried this: `document.addEventListener("fullscreenchange", function(){console.log("f");}, false);`, but it doesn't seem to work! – corazza May 24 '12 at 08:42
1

Yeah, sorry. I should have been clearer on that point. That was why I said "with the appropriate prefix." – Toji May 24 '12 at 17:42
2

People, please stop up-voting lazy answers. "Someone else said something valid." is *not* a valid answer. – John Aug 16 '17 at 07:49

score 14 · Answer 3 · edited Jan 07 '22 at 00:29

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
}

score 10 · Answer 4 · answered Apr 27 '13 at 23:08

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

@vsync - simply replace the `alert` statements with your own code — ErichBSchulz, Feb 11 '14 at 22:43

score 8 · Answer 5 · edited Aug 18 '19 at 13:29

8

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

edited Aug 18 '19 at 13:29

John

1
13
98
177

answered May 01 '17 at 09:45

Victor Dubrovsky

119
1
5

1

Shouldn't there be a test for `document.fullscreenElement`? – Nisse Engström May 12 '17 at 23:25
2

This is the exact correct answer for this question."detecting fullscreen exit" – Ĭsααc tիε βöss Jun 03 '17 at 07:25

score 3 · Answer 6 · answered Feb 06 '18 at 20:41

Mozilla's MDN page hinted me about the usage of fscreen as a vendor-agnostic approach to the fullscreen APIs. Sadly, even at this very date (2018-02-06), these APIs are not fully standardized; Firefox does not have the unprefixed APIs enabled by default.

Anyway, here is the URL to fscreen: https://github.com/rafrex/fscreen (it's available as an npm package for use in Node.js-based build pipelines.)

For the moment, this seems like the superior approach to me until the unprefixed APIs have landed and are readily available in all major browsers.

score 0 · Answer 7 · answered Jan 12 '19 at 02:54

All browsers worked for me except for safari

This is what I ended up using to fix the issue.

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  { 

  document.addEventListener('webkitfullscreenchange', exitHandler);

  function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
           /*CODE HERE*/      
        }
      }
    }

Take a look at the code pen. I have to say a huge thank to Chris Ferdinandi for his post here

How to detect when a page exits fullscreen?

7 Answers7

Linked