Détecter si le navigateur est en mode plein écran

Est-il possible de détecter de manière fiable si un navigateur est en cours d'exécution en mode plein écran? Je suis assez sûr il n'y a pas de n'importe quel navigateur API je peux interroger, mais quiconque a travaillé dessus en examinant et en comparant certaine hauteur/largeur de mesures exposées par le DOM? Même si elle ne fonctionne que pour certains navigateurs, je suis intéressé à entendre parler de lui.

  • Pourquoi avez-vous besoin de le détecter? Peut-être il ya une autre solution à votre problème?
  • Lorsque le navigateur est en mode plein écran il n'y a aucun moyen de voir le temps indiqué par le système d'exploitation (par exemple, dans l'horloge dans la zone de notification de la barre des tâches sous Windows). Être en mesure de voir l'heure actuelle peut être important pour les utilisateurs de notre application web, donc nous aimerions être en mesure d'afficher une horloge lorsque le navigateur est plein de dépistage. D'écran de l'immobilier est à une prime lors de notre application est exécutée à des résolutions plus faibles comme 1024*768 donc nous aimerions seulement l'affichage de l'horloge lorsque le navigateur est plein projeté, si possible.
  • Que faire si ils n'ont normalement pas d'une horloge sur son bureau, et aussi, ne pas utiliser leur navigateur en plein écran? Êtes-vous sûr que vous êtes le seul responsable pour eux, sachant l'heure actuelle?
  • Notre désir de faire ceci est basé sur les commentaires des clients.
  • Je ne comprends pas le troisième degré de la remise en question de la motivation ici. Il y a un certain nombre de raisons pour lesquelles une application web (par exemple), peut-être devriez regarder/se comportent différemment dans F11 mode que dans les chrome. L'accent sur la fourniture d'une solution plutôt que de te demander de l'intention.
InformationsquelleAutor Simon Lieschke | 2009-06-26
  1. 16

    Chrome 15, Firefox 10, et Safari 5.1 maintenant fournissent des Api de programmation pour déclencher le mode plein écran. Le mode plein écran déclenché cette manière fournit des événements pour détecter plein écran changements et CSS pseudo-classes pour le style de fullscreen éléments.

    Voir cette hacks.mozilla.org post de blog pour plus de détails.

    InformationsquelleAutor Simon Lieschke
  2. 9

    Opéra traite plein écran comme une autre feuille de style CSS du type de support. Ils l'appellent L'Opéra De Montrer, et vous pouvez contrôler vous-même facilement:

    @media projection {
  /* these rules only apply in full screen mode */
}

    Combiné avec Opéra@USB, j'ai personnellement trouvé cela très pratique.

    InformationsquelleAutor
  3. 7

    Que sur la détermination de la distance entre la fenêtre d'affichage de la largeur et de la résolution de la largeur et de même pour la hauteur. Si c'est un petit nombre de pixels (surtout pour la hauteur), il peut être en plein écran.

    Cependant, ce ne sera jamais fiable.

    • Si le navigateur est en cours d'exécution en plein écran, la différence entre la taille de la fenêtre et la résolution doit être égale à 0. Sauf si vous utilisez plusieurs moniteurs, je suppose.
    • Sont les barres de défilement comptés comme faisant partie de la fenêtre d'affichage?
    • Je ne suis pas sûr - que vous aurez à expérimenter.
    • C'était les lignes que je pensais le long. Je pourrais écrire une page de test qui affiche toutes les dimensions de l'intérêt et de comparer les dimensions signalées pour la page lors de l'affichage normal et plein écran. À partir de là, j'ai à être en mesure de déterminer l'état pour certains navigateurs.
    • Peut-être quelque chose comme si (resolutionHeight - viewportHeight) < 100) = fullscreen = true
    • Viens de tester avec google Chrome. window.innerWidth , document.body.clientWidth , document.width et document.documentElement.clientWidth tous le même rapport de la valeur ...

    InformationsquelleAutor alex
  4. 5

    Juste pensé que je voudrais ajouter mon thruppence pour sauver quelqu'un claquement de leurs têtes. La première réponse est excellent si vous avez le contrôle complet sur le processus, c'est de vous initier la fullscreen processus dans le code. Inutile devrait-on le faire thissen en appuyant sur F11.

    La lueur d'espoir à l'horizon se présentent sous la forme de cette recommandation du W3C http://www.w3.org/TR/view-mode/ qui va permettre la détection de fenêtre flottante (sans chrome), agrandie, réduite et en plein écran via les media queries (qui signifie bien sûr de la fenêtre.matchMedia et associés).

    J'ai vu des signes que c'est dans le processus de mise en œuvre avec -webkit et -moz préfixes, mais il ne semble pas être dans la production de encore.

    Donc non, pas de solutions, mais j'espère que je vais aider quelqu'un à faire un grand nombre de courir avant de frapper le même mur.

    PS *:-moz-plein écran n'est doo-dah, mais agréable à connaître.

    • Liés recommandation est obsolète en octobre 2018 et ne sera pas mis en œuvre, malheureusement.
    InformationsquelleAutor Paul Duffy
  5. 4

    Firefox 3+ fournit une non-standard de la propriété sur la window objet qui indique si le navigateur est en mode plein écran ou pas: window.plein écran.

    • Nice! Cela ne fonctionner de manière fiable dans Firefox. C'est certainement un élément de la solution.
    InformationsquelleAutor Simon Lieschke
  6. 3

    En Chrome d'au moins:

    onkeydown peut être utilisé pour détecter la touche F11 être pressé pour entrer en mode plein écran.
    onkeyup peut être utilisé pour détecter la touche F11 être enfoncé pour quitter le plein écran.

    L'utiliser en conjonction avec la fonction de vérification pour keyCode == 122

    La partie la plus délicate serait de dire la keydown/keyup, de ne pas exécuter son code si l'autre l'a fait.

    • Cela n'aide pas si l'utilisateur a entré en plein écran avec la touche F11 avant de naviguer vers la page web en cours d'exécution que javascript.
    InformationsquelleAutor Rhyono
  8. 2

    Cela fonctionne pour tous les nouveaux navigateurs :

    if (!window.screenTop && !window.screenY) { 
   alert('Browser is in fullscreen');
}
    • Malheureusement, ce test a tourné peu fiables.
    • Cela semble fonctionner: si (l'écran.height === fenêtre.outerHeight) { alert('Navigateur en plein écran'); }
    • Non, la deuxième solution ne fonctionne pas dans Chrome 23, lorsqu'en plein écran via l'API est sur, mais l'utilisateur qui l'éteint avec Ctrl+alt+F.
    • pourriez-vous être plus précis, quand il est avéré peu fiable?
    • Cela ne fonctionnera pas si un utilisateur n'a pas les bordures de fenêtre et a le navigateur agrandie.
    • Cela ne fonctionnera pas si le navigateur attaché vers le haut.

    InformationsquelleAutor Tom Ulatowski
  9. 2

    Droit. Totalement en retard sur celui-ci...

    À partir du 25 Nov, 2014 (le Temps de l'écriture), il est possible pour les éléments de demander l'accès plein écran, et par la suite le contrôle d'entrer/quitter le mode plein écran.

    MDN Explication ici: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

    D'explication par David Walsh: http://davidwalsh.name/fullscreen

    InformationsquelleAutor Abhishek
  10. 2

    Vous pouvez vérifier si document.fullscreenElement n'est pas nulle pour déterminer si le mode plein écran est activé. Vous aurez besoin de fournisseur préfixe fullscreenElement en conséquence. Je voudrais utiliser quelque chose comme ceci:

    var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;

    https://msdn.microsoft.com/en-us/library/dn312066(v=vs. 85).aspx a un bon exemple de ce que je cite ci-dessous:

    document.addEventListener("fullscreenChange", function () {
          if (fullscreenElement != null) {
              console.info("Went full screen");
          } else {
              console.info("Exited full screen");              
          }
      });
    InformationsquelleAutor Parth
  11. 1

    Il y a PAS de croix-navigateur variante:

    <!DOCTYPE html>
<html>
<head>
  <title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
  if (!fullscreen) {
    setTimeout(function(heightStamp) {
      if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
        fullscreen = true;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
      }
    }, 500, $(window).height());
  } else {
    setTimeout(function(heightStamp) {
      if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
        fullscreen = false;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
      }
    }, 500, $(window).height());
  }
});
</script>
</body>
</html>

    Testé sur:

    Kubuntu 13.10:

    Firefox 27 (<!DOCTYPE html> est nécessaire, le script fonctionne correctement avec deux moniteurs), Chrome 33, Rekonq passe -

    Win 7:

    Firefox 27, Chrome 33, Opera 12, Opera 20, c'est à dire 10 - pass

    IE < 10 - l'échec

    InformationsquelleAutor SergO
  12. 1

    Ma solution est la suivante:

    var fullscreenCount = 0;
var changeHandler = function() {                                           

    fullscreenCount ++;

    if(fullscreenCount % 2 === 0)
    {
        console.log('fullscreen exit');
    }
    else
    {
        console.log('fullscreened');
    }

}                                                                         
document.addEventListener("fullscreenchange", changeHandler, false);      
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);
    InformationsquelleAutor w4kskl
  13. 1

    C'est la solution que j'ai appris à...
    Je l'ai écrit comme un es6 module, mais le code devrait être assez simple.

    /**
 * Created by sam on 9/9/16.
 */
import $ from "jquery"

function isFullScreenWebkit(){
    return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
    return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
    return $("*:-ms-fullscreen").length > 0;
}

function isFullScreen(){
    //Fastist way
    var result =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;

    if(result) return true;

    //A fallback
    try{
        return isFullScreenMicrosoft();
    }catch(ex){}
    try{
        return isFullScreenMozilla();
    }catch(ex){}
    try{
        return isFullScreenWebkit();
    }catch(ex){}

    console.log("This browser is not supported, sorry!");
    return false;
}

window.isFullScreen = isFullScreen;

export default isFullScreen;
    InformationsquelleAutor sam_g_steel
  14. 0

    Utilisateur window.innerHeight et screen.availHeight. Aussi les largeurs.

    window.onresize = function(event) {
    if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
        console.log("This is your MOMENT of fullscreen: " + Date());    
}
    InformationsquelleAutor Charlie H
  15. 0

    Le Document propriété en lecture seule retourne l'Élément qui est actuellement présenté en mode plein écran dans le présent document, ou la valeur null si le mode plein écran n'est pas actuellement en cours d'utilisation.

    if(document.fullscreenElement){
  console.log("Fullscreen");
}else{
  console.log("Not Fullscreen");
};

    Prend en charge tous les principaux navigateurs.

    InformationsquelleAutor Sarif Mia