Come rilevare quando una pagina esce a schermo intero?

Question

Sto creando un gioco multiplayer 3D con Three.js, in cui i giocatori possono unirsi a vari giochi esistenti. Una volta cliccato "play", il renderer viene aggiunto alla pagina e ai fullscreen. Funziona alla grande, ma il problema è che, quando esco dallo schermo intero, rimane ancora accodato. Mi piacerebbe rimuoverlo, ma non so quando!

Quindi, in sostanza, sto cercando un evento che dice "questo elemento è uscito a schermo intero".

Questo è come mi aggiungo il renderer alla pagina:

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

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

Questo se come ho FullScreen è:

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

Inoltre, c'è un modo per fermare quel colpo di testa fastidioso di apparire ogni volta qualcuno punta il suo mouse in cima alla pagina? E, immagino, posso solo impedire che la fuga faccia quello che fa (uscita a schermo intero) in Firefox e Chrome con preventDefault?

E, inoltre, qualcuno sa perché Firefox è molto più lento di Chrome nel rendering 3D? Voglio dire, sto usando WebGL, questo significa che la GPU è in uso!

EDIT:

L'evento "fullscreenchange" è infatti licenziato, ma ha nomi diversi sotto vari browser. Ad esempio, su Chrome si chiama "webkitfullscreenchange" e su Firefox è "mozfullscreenchange".

Answer 1

La specifica a schermo intero specifica che l'evento "fullscreenchange" (con il prefisso appropriato) viene attivato sul documento ogni volta che cambia lo stato della pagina a schermo intero, che include l'entrata e l'uscita dallo schermo intero. All'interno di quell'evento è possibile controllare document.fullScreenElement per vedere se la pagina è a schermo intero o meno. Se è a schermo intero, la proprietà sarà non nullo.

Check out MDN per ulteriori dettagli.

Come per le altre domande: No, non c'è modo di impedire che Esc esca da schermo intero. Questo è il compromesso che è stato fatto per garantire che l'utente abbia sempre il controllo su ciò che sta facendo il proprio browser. Il browser sarà mai e ti darà un modo per impedire agli utenti di uscire a schermo intero. Periodo.

Per quanto riguarda il rallentamento del rendering di Chrome rispetto a Chrome, posso assicurarvi che per molti scopi pratici non lo è. Se stai riscontrando una notevole differenza di prestazioni tra i due browser, probabilmente significa che il tuo codice javascript è il collo di bottiglia, non la GPU.

Answer 2

sto usando John Dyer's code, integrato con Toni e commenti di Yannbane per creare un gestore centrale, e l'aggiunta di più listener chiamarlo:

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

Questo è stato testato solo in Moz 12.

Non esitate a espandere

Answer 3

Ecco come ho fatto:

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

Supporta Opera, Safari, Chrome con webkit, Firefox/Gecko con moz, IE 11 con MSFullScreenChange, e sosterrà la specifiche attuali con fullscreenchange una volta che è stato implementato con successo in tutti i browser. Ovviamente, l'API Fullscreen è supportata solo nei browser moderni, quindi non ho fornito fallback attachEvent per le versioni precedenti di IE.

Answer 4

API per i browser modificati. Ad esempio: non c'è document.webkitIsFullScreen in Chrome. Questo è ciò che ha funzionato per me:

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

ho un po 'cambiato il codice di Alex W per rendere gli eventi fuoco su fullscreen uscite solo. Testato in Firefox 53.0, 48.0 Chrome e 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

Mozilla MDN page mi ha accennato circa l'utilizzo di fscreen come un approccio vendor-agnostic alle API a schermo intero. Purtroppo, anche a questa data (2018-02-06), queste API non sono completamente standardizzate; Firefox non ha le API non prefissate abilitate di default.

In ogni caso, qui è l'URL per fscreen: https://github.com/rafrex/fscreen (. È disponibile come pacchetto npm per l'uso in tubazioni di build Node.js basate)

Per il momento, questa sembra l'approccio superiore a me fino a quando le API non prefissate sono arrivate e sono prontamente disponibili in tutti i principali browser.