Réglez la fenêtre sur fullscreen (Real fullscreen; F11 functionality) par javascript

Il ya plusieurs questions à ce sujet, certains disent que ce n'est pas possible, certains disent que c'est possible dans IE tels que Internet Explorer mode plein écran? et je me demande une solution universelle et une réponse pour ça.

je suis en train de construire une page Web de Galerie de photos, et la galerie fait vraiment une différence quand vu fullscreen (comme le titre le dit, je parle de vrai fullscreen, pas avec barres et chrome de fenêtre etc), et je voudrais placer un bouton pour fullscreen. (Non, Je ne vais pas aller de force FS sans l'intention de l'utilisateur, je déteste ce genre de" fonctionnalité " trop) il est possible en Flash lorsqu'il est initié par une action initiée par l'utilisateur tel que le clic de bouton, et je me demandais si une telle chose est disponible pour Javascript aussi. Logiquement, il devrait avoir un mécanisme similaire au mode fullscreen initié par L'utilisateur Flash/SL. S'il n'y a pas de fonctionnalité "universelle" qui fonctionnera pour tous, Je suis ok (mieux que rien) pour la fonctionnalité partielle (je veux dire supportant certains des navigateurs par cela, pas paramétrant la largeur/hauteur de la fenêtre etc. ne vient pas avec une réponse disant pour définir la largeur de la fenêtre ou de la hauteur, je sais comment le faire, je ne suis PAS à la recherche pour elle).

23
demandé sur Community 2011-08-24 21:12:54

6 réponses

cela est désormais possible dans les dernières versions de Chrome, Firefox et IE(11).

suivant les pointeurs par Zuul sur ce fil de discussion , j'ai modifié son code pour inclure IE11 et l'option de plein écran n'importe quel élément de choix sur votre page.

JS: 

function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

HTML: 

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

Où ".corps " est tout élément que vous souhaitez.

Note complémentaire que d'essayer d'exécuter ces commandes de l'écran de la console ne semble pas fonctionner sur Chrome ou IE. J'ai eu du succès avec Firebug dans Firefox.

une autre chose à noter est que ces commandes "plein écran" n'ont pas de barre de défilement verticale, vous devez le spécifier dans le CSS: 

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

Le "!important "semble être nécessaire pour IE de le rendre

voici un exemple de fonctionnement informatique .

31
répondu Jamie Barker 2017-05-23 10:31:19

Pas de. les anciennes versions D'IE (≤6) l'autorisaient, mais cette fonctionnalité est considérée comme un problème de sécurité, donc aucun navigateur moderne ne l'autorise.

vous pouvez toujours appeler window.open(url,'','fullscreen=yes') , ce qui vous obtient 90% du chemin, mais a des résultats légèrement différents:

  • IE ouvre une fenêtre avec barre de titre et barre D'URL. La fenêtre est dimensionnée pour remplissez l'écran entier, et couvre la barre des tâches de Windows .
  • Mozilla ouvre également une fenêtre avec titlebar et barre D'URL. Cependant, la nouvelle fenêtre hérite des dimensions de la fenêtre d'ouverture. Si la fenêtre d'ouverture est maximisée, la nouvelle fenêtre est maximisée. (La barre des tâches n'est pas couvert.)
  • Chrome ouvre également une fenêtre avec uniquement barre de titre et barre D'URL. La nouvelle fenêtre hérite des dimensions de la fenêtre d'ouverture, mais elle est jamais ouvert maximisé (même si la fenêtre d'ouverture est maximisée).

C'est aussi proche que vous obtiendrez avec JavaScript. Votre autre option serait de construire quelque chose en Flash (pouah!) , ou tout simplement faire apparaître votre bouton" fullscreen "dans une lightbox qui dit" appuyez sur F11 Pour aller fullscreen", et masquez la lightbox sur window.resize ou cliquez sur un bouton Annuler dans la lightbox.

Edit: a proper fullscreen API (d'abord proposé par Mozilla et ensuite publié en tant que proposition W3C ) a été mis en œuvre par Webkit (Safari 5.1+/Chrome 15+) et Firefox (10+). bref historique et exemples d'usage ici. Notez que IE10 supposé pas support de l'API.

8
répondu josh3736 2011-11-28 03:20:23

vous pouvez le faire avec une applet java signée qui a la permission d'exécuter un script d'automatisation pour émettre la touche pour passer en mode plein écran. Mais, c'est un piratage total qui ne serait pas très pratique à moins que vos utilisateurs ne se gênent de votre site manipuler leurs machines.

1
répondu Daniel Pereira 2011-08-24 17:20:57

je me demande pourquoi personne n'a remarqué que toutes les réponses sont fausses.



Le réglage de l'élément de corps en plein écran ne pas ont le même comportement de pression F11.

le même comportement de F11 peut être obtenu par: 

document.documentElement.webkitRequestFullScreen();   // on

et 

document.webkitCancelFullScreen();  // off

aussi pour vérifier si nous sommes en mode plein écran j'utilise cette ligne: 

isFullScreen=()=>!(document.webkitCurrentFullScreenElement==null)
1
répondu Zibri 2018-07-19 06:17:50

il y a une bibliothèque inconnue qui fait tout le travail pour vous:

https://github.com/rafrex/fscreen

j'ai eu le même problème et je l'ai fait (par exemple dans un composant react): 

import fscreen from 'fscreen';
.....

if (fscreen.fullscreenElement == null) {
  fscreen.requestFullscreen(document.documentElement);
}else{
  fscreen.exitFullscreen();
}

Works in Chrome, Firefox, Safari, IE11, iOS, Android""

0
répondu Lluís Marfany 2018-02-21 14:53:44

le support plein écran par java script n'est pas implémenté pour Chrome ou Firefox. Cependant, vous pouvez réussir à l'avoir pour MSIE. Mais ce n'est pas non plus une fonctionnalité de type F11.

Even chrome.exe -kiosk n'ouvre pas la page en mode plein écran.

la raison est qu'il n'est pas recommandé de forcer l'utilisateur et ouvrir votre application en mode plein écran. Si ce n'est pas tous les popups de différents sites Web s'ouvrira en mode plein écran et vous endup la fermeture de toutes les personnes.

-1
répondu Anuj Verma 2011-08-24 17:53:38