web-dev-qa-db-fra.com

Définir la fenêtre en plein écran (REAL fullscreen; fonctionnalité F11) avec javascript

Il y a plusieurs questions à ce sujet, certains disent que ce n'est pas possible, certains disent que IS est possible dans IE, tel que Internet Explorer en mode plein écran? et je me demande une solution universelle et une réponse à cela.

Je construis une page Web de galerie de photos, et la galerie fait vraiment une différence quand elle est vue en plein écran (comme le titre le dit, je parle de true en plein écran, pas avec les barres et les fenêtres chromées, etc.), et j'aimerais placer un bouton pour le plein écran. (Non, je n'irai pas de force FS sans la volonté de l'utilisateur, je déteste aussi ce genre de "fonctionnalité") Cela IS est possible dans Flash lorsqu'il est déclenché par une action de l'utilisateur, telle qu'un clic sur un bouton , et je me demandais si une telle chose était aussi disponible pour Javascript. Logiquement, il devrait avoir un mécanisme similaire au mode plein écran initié par l'utilisateur de Flash/SL. S'il n'y a pas de fonctionnalité "universelle" qui fonctionnera pour tout le monde, je suis d'accord (mieux que rien) pour une fonctionnalité partielle (je veux dire supportant CERTAINS des navigateurs par cela, PAS définissant la largeur/hauteur de la fenêtre etc. ne venez pas avec une réponse disant de régler la largeur/hauteur de la fenêtre, je sais comment le faire, je ne le cherche pas) aussi.

javascriptjqueryfullscreen
23
Can Poyrazoğlu

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

En suivant les indications de Zuul sur ce fil de discussion , j’ai édité son code pour y inclure IE11 et l’option pour afficher en plein écran tout élément de votre 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ù "document.body" est un élément de votre choix.

Notez également qu'essayer d'exécuter ces commandes en plein écran à partir de la console ne semble pas fonctionner sur Chrome ou IE. J'ai eu du succès avec Firebug dans Firefox cependant.

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

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

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

Voici un exemple de travail .

32
Jamie Barker

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

Si vous définissez l’élément body en plein écran, pas a le même comportement que si vous appuyez sur 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)

Remarque: Ceci doit être appelé depuis un événement d'interaction utilisateur (onclick, onkeydown, etc.).}

2
Zibri

Vous pouvez le faire avec un applet Java signé qui est autorisé à exécuter un script d'automatisation afin d'émettre la frappe au clavier pour passer en mode plein écran. Mais, c'est un piratage total qui ne serait pas très pratique à moins que vos utilisateurs ne s'inquiètent pas de votre site qui manipule leurs machines.

1
Daniel Pereira

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 j'ai eu (par exemple dans un composant de réaction):

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

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

Fonctionne dans Chrome, Firefox, Safari, IE11, iOS, Android

0
Lluís Marfany