web-dev-qa-db-fra.com

Comment détecter quand une page quitte le mode plein écran?

Je crée un jeu multijoueur 3D avec Three.js, où les joueurs peuvent rejoindre différents jeux existants. Une fois que "lecture" est cliqué, le moteur de rendu est ajouté à la page et au plein écran. Cela fonctionne très bien, mais le problème est que, lorsque je quitte le mode plein écran, il reste toujours ajouté. Je voudrais l'enlever, mais je ne sais pas quand!

Donc, fondamentalement, je recherche un événement qui dit "cet élément est sorti en plein écran".

Voici comment j'ajoute le moteur de rendu à la page:

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

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

Ceci si je le fais en plein écran:

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

Aussi, y a-t-il un moyen d'empêcher cet en-tête ennuyeux d'apparaître chaque fois que quelqu'un pointe sa souris vers le haut de la page? Et, je suppose que je peux juste empêcher l’échappement de faire ce qu’il fait (quitter le mode plein écran) dans Firefox et Chrome avec preventDefault?

Et aussi, est-ce que quelqu'un sait pourquoi Firefox est tellement plus lent que le rendu 3D de Chrome? Je veux dire, j'utilise WebGL, cela signifie que le GPU est utilisé!

MODIFIER:

L'événement "fullscreenchange" est effectivement déclenché, mais il porte des noms différents sous différents navigateurs. Par exemple, sur Chrome, cela s'appelle "webkitfullscreenchange" et sur Firefox, c'est "mozfullscreenchange".

javascripthtmlbrowserfullscreenwebgl
44
corazza

La spécification Fullscreen spécifie que l'événement "fullscreenchange" (avec le préfixe approprié) est déclenché sur le document chaque fois que l'état de la page en plein écran change, ce qui inclut l'affichage en plein écran. Dans cet événement, vous pouvez vérifier document.fullScreenElement pour voir si la page est plein écran ou non. Si c'est plein écran la propriété sera non-null.

Consultez MDN pour plus de détails.

En ce qui concerne vos autres questions: Non, il n’ya aucun moyen d’empêcher Esc de quitter le mode plein écran. C'est le compromis qui a été fait pour s'assurer que l'utilisateur a toujours le contrôle sur ce que fait son navigateur. Le navigateur jamais vous permettra d'empêcher les utilisateurs de quitter le mode plein écran. Période.

En ce qui concerne Firefox, son rendu est plus lent que Chrome, je peux vous assurer que, dans la plupart des cas, ce n’est pas le cas. Si vous constatez une différence de performances importante entre les deux navigateurs, cela signifie probablement que votre code javascript est le goulot d'étranglement et non le GPU.

40
Toji

Voici comment je l'ai fait:

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

Prend en charge Opera, Safari, Chrome avec webkit, Firefox/Gecko avec moz, IE 11 avec MSFullScreenChange et prend en charge la spécification actuelle avec fullscreenchange une fois qu'elle a été implémentée avec succès dans tous les navigateurs. De toute évidence, l’API Fullscreen n’est prise en charge que par les navigateurs modernes. Je n’ai donc pas fourni de solutions de remplacement attachEvent pour les anciennes versions d’IE.

68
Alex W

j'utilise le code de John Dyer , intégré à Toni et aux commentaires de Yannbane pour créer un gestionnaire central, et l'ajout de plusieurs écouteurs pour l'appeler:

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

Ceci est uniquement testé dans Moz 12. 

S'il vous plaît n'hésitez pas à développer

11
ErichBSchulz

API pour les navigateurs modifiés. Par exemple: il n'y a pas de document.webkitIsFullScreen dans Chrome. C'est ce qui a fonctionné pour moi:

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
}
10
wawka

J'ai légèrement modifié le code d'Alex W pour que les événements se déclenchent en plein écran sorties uniquement. Testé dans Firefox 53.0, Chrome 48.0 et 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
    }
}
6
Victor Dubrovsky

La page MDN de Mozilla m'a fait allusion au sujet de l'utilisation de fscreen en tant qu'approche indépendante du fournisseur pour les API plein écran. Malheureusement, même à cette date (2018-02-06), ces API ne sont pas complètement normalisées. Les API sans préfixe ne sont pas activées par défaut pour Firefox.

Quoi qu'il en soit, voici l'URL de fscreen: https://github.com/rafrex/fscreen (il est disponible en tant que package npm à utiliser dans les pipelines de génération basés sur Node.js.)

Pour le moment, cela me semble être une approche supérieure jusqu'à ce que les API non préfixées aient atterri et soient facilement disponibles dans tous les principaux navigateurs.

2
Per Lundberg

Tous les navigateurs ont fonctionné pour moi sauf pour le safari

C'est ce que j'ai fini par utiliser pour résoudre le problème.

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  { 

  document.addEventListener('webkitfullscreenchange', exitHandler);

  function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
           /*CODE HERE*/      
        }
      }
    }

Jetez un coup d'oeil au stylo code. Je tiens à remercier Chris Ferdinandi pour son poste ici

0
Digggid