¿Cómo detectar cuando una página sale de pantalla completa?

Question

Estoy creando un juego multijugador en 3D con Three.js, donde los jugadores pueden unirse a varios juegos existentes. Una vez que se hace clic en "reproducir", el representador se agrega a la página y a pantalla completa. Esto funciona de maravilla, pero el problema es que, cuando salgo de la pantalla completa, sigue adjuntado. Me gustaría eliminarlo, ¡pero no sé cuándo!

Así que, básicamente, estoy buscando un evento que diga "este elemento salió de pantalla completa".

Así es como añado el render a la página:

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

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

Esto si como me pantalla completa que:

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

Además, ¿hay una manera de detener ese molesto cabecera aparezcan cuando alguien apunta su mouse hacia la parte superior de la página? Y, supongo que puedo evitar que escape de hacer lo que hace (salir de pantalla completa) en Firefox y Chrome con preventDefault?

Y, también, ¿alguien sabe por qué Firefox es mucho más lento que Chrome en la representación 3D? Quiero decir, estoy usando WebGL, ¡esto significa que la GPU está siendo utilizada!

EDIT:

El evento "fullscreenchange" es, en efecto disparado, pero tiene diferentes nombres en diferentes navegadores. Por ejemplo, en Chrome se llama "webkitfullscreenchange" y en Firefox es "mozfullscreenchange".

Answer 1

La especificación de pantalla completa especifica que el evento "fullscreenchange" (con el prefijo apropiado) se dispara en el documento cada vez que cambia el estado de pantalla completa de la página, lo que incluye entrar y salir de la pantalla completa. Dentro de ese evento, puede marcar document.fullScreenElement para ver si la página es a pantalla completa o no. Si es pantalla completa, la propiedad no será nula.

Check out MDN para obtener más información.

En cuanto a sus otras preguntas: No, no hay forma de evitar que Esc salga de pantalla completa. Ese es el compromiso que se hizo para garantizar que el usuario siempre tenga control sobre lo que está haciendo su navegador. El navegador nunca le dará una forma de evitar que los usuarios salgan de pantalla completa. Período.

En cuanto a que Firefox es más lento en la renderización que en Chrome, puedo asegurarle que para la mayoría de los propósitos prácticos no lo es. Si observa una gran diferencia en el rendimiento entre los dos buscadores, probablemente signifique que su código de JavaScript es el cuello de botella, no la GPU.

Answer 2

estoy usando John Dyer's code, integrado con Toni, y los comentarios de Yannbane para crear un controlador central, y la adición de varios detectores en lo llaman:

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

Esto sólo se prueba en 12 Moz.

dude en ampliar

Answer 3

Así es como lo hice:

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

function exitHandler() 
{ 
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null) 
    { 
     /* Run code on exit */ 
    } 
} 

Soporta Opera, Safari, Chrome con webkit, Firefox/Gecko con moz, IE 11 con MSFullScreenChange, y apoyará la especificación real con fullscreenchange una vez que se ha implementado con éxito en todos los navegadores. Obviamente, la API de pantalla completa solo es compatible con los navegadores modernos, por lo que no proporcioné reembolsos de attachEvent para las versiones anteriores de IE.

Answer 4

API para navegadores modificada. Por ejemplo: no hay document.webkitIsFullScreen en Chrome. Esto es lo que funcionó para mí:

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

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

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

Answer 5

poco he cambiado el código de Alex W para hacer eventos de incendios en pantalla completa salidas solamente. Probado en Firefox 53.0, 48.0 Chrome y Chromium 53.0:

if (document.addEventListener) 
{ 
    document.addEventListener('webkitfullscreenchange', exitHandler, false); 
    document.addEventListener('mozfullscreenchange', exitHandler, false); 
    document.addEventListener('fullscreenchange', exitHandler, false); 
    document.addEventListener('MSFullscreenChange', 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 
    } 
} 

Answer 6

de Mozilla MDN page me dio a entender sobre el uso de fscreen como un enfoque independiente del proveedor a la API de pantalla completa. Tristemente, incluso en esta misma fecha (2018-02-06), estas API no están completamente estandarizadas; Firefox no tiene habilitadas las API no prefijadas por defecto.

De todos modos, aquí está el URL para fscreen: https://github.com/rafrex/fscreen (. Está disponible como un paquete npm para su uso en tuberías de construcción basada en Node.js)

Por el momento, esto parece ser el enfoque superior a mí hasta las API no prefijadas han aterrizado y están disponibles en todos los principales navegadores.