Wie erkennt man, wenn eine Seite den Vollbildmodus beendet?

Question

Ich erstelle ein 3D-Multiplayer-Spiel mit Three.js, bei dem Spieler verschiedenen existierenden Spielen beitreten können. Sobald auf "Wiedergabe" geklickt wird, wird der Renderer an die Seite und die Vollbilder angehängt. Das funktioniert gut, aber das Problem ist, dass, wenn ich den Vollbildmodus verlasse, er immer noch angehängt bleibt. Ich möchte es entfernen, aber ich weiß nicht wann!

Also, im Grunde bin ich auf der Suche nach einem Ereignis, das sagt "dieses Element beendet Fullscreen".

Dies ist, wie ich den Renderer auf die Seite anhängen:

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

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

Dies, wenn, wie ich es Vollbild:

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

Auch ist es eine Möglichkeit, dass lästige Kopf zu stoppen geschaltet wird, wenn jemand zeigt seine Maus an den Anfang der Seite? Und ich glaube, ich kann einfach verhindern, dass es in Firefox und Chrome mit preventDefault funktioniert (in Vollbildmodus).

Und weiß auch jemand warum ist Firefox so viel langsamer als Chrome in 3D-Rendering? Ich meine, ich benutze WebGL, das bedeutet, dass die GPU verwendet wird!

EDIT:

Die "fullscreenchange" Ereignis tatsächlich ausgelöst wird, aber es verschiedene Namen unter verschiedenen Browsern hat. In Chrome beispielsweise heißt es "webkitfullscreenchange" und in Firefox "mozfullscreenchange".

Answer 1

Die Fullscreen-Spezifikation gibt an, dass das Ereignis "fullscreenchange" (mit dem entsprechenden Präfix) für das Dokument ausgelöst wird, wenn sich der Vollbildstatus der Seite ändert, einschließlich Ein- und Ausblenden des Vollbilds. Innerhalb dieses Ereignisses können Sie überprüfen document.fullScreenElement, um zu sehen, ob die Seite Vollbild ist oder nicht. Wenn es Vollbild ist, wird die Eigenschaft nicht null sein.

Check out MDN für weitere Details.

Wie für Ihre anderen Fragen: Nein, es gibt keine Möglichkeit zu verhindern, Esc beenden Vollbildmodus. Das ist der Kompromiss, der gemacht wurde, um sicherzustellen, dass der Benutzer immer die Kontrolle über den Browser hat. Der Browser nie gibt Ihnen eine Möglichkeit, Benutzer zu verhindern, den Vollbildmodus zu beenden. Zeitraum.

Da Firefox beim Rendern langsamer ist als Chrome, kann ich Ihnen versichern, dass dies für die meisten praktischen Zwecke nicht der Fall ist. Wenn Sie einen großen Unterschied in der Leistung zwischen den beiden Browsern sehen, bedeutet dies wahrscheinlich, dass Ihr JavaScript-Code der Engpass ist, nicht die GPU.

Answer 2

i John Dyer's code bin mit, integrierte mit Toni und Yannbane Kommentaren einen zentralen Handler zu erstellen, und mehrere Zuhörer Zugabe rufen:

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

Diese nur in Moz 12 getestet wird.

Bitte fühlen Sie sich frei

Answer 3

Hier zu erweitern ist, wie ich es tat:

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

Unterstützt Opera, Safari, Chrome mit webkit, Firefox/Gecko mit moz, 11 IE mit MSFullScreenChange, und unterstützt die tatsächliche Spezifikation mit fullscreenchange, sobald es in allen Browsern erfolgreich implementiert wurde. Offensichtlich wird Vollbild-API nur in den modernen Browsern unterstützt, so dass ich attachEvent Fallbacks für ältere Versionen von IE nicht zur Verfügung gestellt habe.

Answer 4

API für Browser geändert. Beispiel: In Chrome gibt es keinen document.webkitIsFullScreen. Dies ist, was für mich gearbeitet:

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

I Ereignisse Feuer auf Vollbild Ausfahrten etwas Alex Ws Code geändert nur zu machen. Getestet in Firefox 53.0, Chrome 48.0 und Chrom 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

Mozillas MDN page deutete an mich über die Verwendung von fscreen als herstellerunabhängige Ansatz für den Vollbild-APIs. Leider sind diese APIs selbst zu diesem Zeitpunkt (2018-02-06) noch nicht vollständig standardisiert. In Firefox sind die APIs ohne Präfix standardmäßig nicht aktiviert.

Wie auch immer, hier ist die URL zu fscreen: https://github.com/rafrex/fscreen (. Es verfügbar ist als npm Paket für den Einsatz in Node.js-basierten Build-Pipelines)

Für den Moment scheint dies der bessere Ansatz mich bis Die APIs ohne Präfix sind gelandet und in allen gängigen Browsern verfügbar.