jcora jcora - 6 months ago 20
HTML Question

How to detect when a page exits fullscreen?

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

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

This if how I fullscreen it:

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

And, also, does anyone know why is Firefox so much slower than Chrome in 3D rendering? I mean, I'm using WebGL, this means that the GPU is being used!


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


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.