javascript - only - mobile-web-app-capable

¿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!

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

Así es como agrego el renderizador 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, cómo lo hice a pantalla completa:

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

Además, ¿hay alguna manera de evitar que ese encabezado molesto aparezca cada vez que alguien apunta con 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 3D? Quiero decir, estoy usando WebGL, ¡esto significa que la GPU está siendo utilizada!

EDITAR:

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

Answer 1

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 2

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

Admite Opera, Safari, Chrome con webkit , Firefox / Gecko con moz , IE 11 con MSFullScreenChange , y admitirá la especificación real con fullscreenchange una vez que se haya 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é attachEvent para versiones anteriores de IE.

Answer 3

Cambié ligeramente el código de Alex W para que los eventos se dispararan solo en las salidas de pantalla completa. Probado en Firefox 53.0, Chrome 48.0 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 4

Estoy usando el código de John Dyer , integrado con Toni, y los comentarios de Yannbane para crear un controlador central y agregar múltiples oyentes para llamarlo:

 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 solo se prueba en Moz 12.

Por favor siéntase libre de expandir

Answer 5

La página MDN de Mozilla me insinuó sobre el uso de fscreen como un enfoque fscreen vendedor para las 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á la URL de fscreen : https://github.com/rafrex/fscreen (está disponible como un paquete npm para su uso en tuberías de compilación basadas en Node.js).

Por el momento, este parece ser el enfoque superior para mí hasta que las API no prefijadas hayan aterrizado y estén disponibles en todos los principales navegadores.

Answer 6

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 verificar document.fullScreenElement para ver si la página está en pantalla completa o no. Si es pantalla completa, la propiedad no será nula.

Visite MDN para más detalles.

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 renderizar que 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.