Comment rendre la fenêtre plein écran avec Javascript (s'étendant sur tout l'écran)


253

Comment faire pour que le navigateur d'un visiteur passe en plein écran en utilisant JavaScript, d'une manière qui fonctionne avec IE, Firefox et Opera?


29
son application intérieure, pas pour le public. Je ne vais abuser de personne
user63898

2
Vous pouvez, pragmatiquement, demander à l'utilisateur:sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
Boldewyn

6
Je suis curieux de savoir comment fonctionne le plein écran youtube. Quelqu'un connaît la réponse?
Kasturi

6
ceci est fait par le lecteur flash et non par le navigateur
user63898

5
Pour un aperçu de l'état de l'art, regardez ici: hacks.mozilla.org/2012/01/…
loomi

Réponses:


54

C'est aussi proche que possible du plein écran en JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script> 

regardez le lien / la réponse acceptée dans le lien haim evgi posté ... vous n'êtes pas censé pouvoir redimensionner le navigateur. Vous pouvez cependant maximiser dans la fenêtre des navigateurs (c'est comme ça que je l'ai lu)
lexu

4
Dépend de vos paramètres d'autorisation javascript dans Options. Vous pouvez basculer le contrôle js sur les fonctionnalités de la fenêtre.
garrow

3
Cela s'est produit la dernière fois qu'un site a utilisé un code comme celui-là et je ne l'ai pas bloqué: dorward.me.uk/tmp/fullscreen.jpeg
Quentin

2
Jetez un œil à l'API webkit-fullscreen: bleeding-edge-tlv.appspot.com/#28 (de # gdd2011)
Christian Kuetbach

17
C'EST VIEUX. REGARDEZ CI-DESSOUS LA SOLUTION!
Keavon

281

Dans les navigateurs plus récents tels que Chrome 15, Firefox 10, Safari 5.1, IE 10, cela est possible. Il est également possible pour les anciens IE via ActiveX en fonction des paramètres de leur navigateur.

Voici comment procéder:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

L'utilisateur doit évidemment accepter la demande en plein écran en premier, et il n'est pas possible de la déclencher automatiquement sur pageload, elle doit être déclenchée par un utilisateur (par exemple un bouton)

En savoir plus: https://developer.mozilla.org/en/DOM/Using_full-screen_mode


3
Actuellement disponible dans Chrome 15, Firefox 10 et Safari 5.1. Voir cet article de blog hacks.mozilla.org pour plus de détails sur l'état actuel des choses .
Simon Lieschke

10
Fantastique, une façon de quitter le plein écran?
Christopher Chase

2
Quelques choses. Dans IE, cela ignorera évidemment l'élément et tout en plein écran. Si vous voulez tout afficher en plein écran, document.documentElementvous obtiendrez l'élément racine correct ('html' ou 'body'). Et utilisez peut utiliser cancelFullscreen()pour le fermer (ou renvoyer 'F11' pour IE).
Matthew Wilcoxson

6
Il ne peut être déclenché que par l'utilisateur (par exemple via un bouton plein écran). Le plein écran automatique pendant le chargement n'est pas possible.
A. KR

3
faute d'orthographe pour IE, devrait être msRequestFullScreen, comme dans les documents msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx
DanielB

66

Ce code comprend également comment activer le plein écran pour Internet Explorer 9, et probablement les anciennes versions, ainsi que les versions très récentes de Google Chrome. La réponse acceptée peut également être utilisée pour d'autres navigateurs.

var el = document.documentElement
    , rfs = // for newer Webkit and Firefox
           el.requestFullscreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen
        || el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
  // for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript!=null) {
     wscript.SendKeys("{F11}");
  }
}

Sources:


Fonctionne sur IE 8 ci-dessus, FF10 ci-dessus (essayé dans FF 9, cela ne fonctionne pas), testé sur Chrome 18
Treby

@Peter O. "devrait être placé dans un gestionnaire d'événements", est-il possible de le déclencher en charge?
Francis P

@FrancisP: Non; ni "charger" ni "DOMContentLoaded" n'est un UIEvent ou MouseEvent applicable pour l'API plein écran.
Peter O.

2
Merci pour "(notez, cependant, que requestFullScreen" ne fonctionne que pendant "" [m] ost UIEvents et MouseEvents, tels que clic et keydown, etc. "," donc il ne peut pas être utilisé de manière malveillante ".)"

Oui, documentElementc'est mieux que bodypour moi.
Matt

24

Voici une solution complète pour entrer et sortir du mode plein écran (aka annuler, quitter, échapper)

        function cancelFullScreen(el) {
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function requestFullScreen(el) {
            // Supports most browsers and their versions.
            var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
            return false
        }

        function toggleFull() {
            var elem = document.body; // Make the body go full screen.
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen(document);
            } else {
                requestFullScreen(elem);
            }
            return false;
        }

1
Et alors msIsFullScreen?
kangax

1
La spécification a changé. webkitCancelFullScreenest maintenant webkitExitFullscreen. generatecontent.org/post/70347573294/…
Doug S

la première partie de cette opération logique et est redondante et doit être suppriméedocument.fullScreenElement && document.fullScreenElement !== null
consideRatio

changer l' elementrée toggleFull()de document.bodyà document.documentElementpour résoudre le problème de marge gauche et droite
Firnas

11

Vous pouvez utiliser l' API plein écran Vous pouvez voir un exemple ici

L'API plein écran offre un moyen simple de présenter du contenu Web sur tout l'écran de l'utilisateur. Cet article fournit des informations sur l'utilisation de cette API.


8

La nouvelle technologie html5 - API plein écran nous permet de présenter facilement le contenu d'une page Web en mode plein écran. Nous sommes sur le point de vous donner des informations détaillées sur le mode plein écran. Essayez d'imaginer tous les avantages possibles que vous pouvez obtenir en utilisant cette technologie - albums photo en plein écran, vidéos et même jeux.

Mais avant de décrire cette nouvelle technologie, je dois noter que cette technologie est expérimentale et prise en charge par tous les principaux navigateurs .

Vous pouvez trouver le tutoriel complet ici: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Voici la démo de travail: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm


1
@Ian Il fonctionne dans le bord IE. Une ancienne version d'IE ne prend pas en charge cela.
Dhiraj

8

J'ai utilisé ça ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <script language="JavaScript">
        function fullScreen(theURL) {
            window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
        }
        // End -->
    </script>
</head>

<body>
    <h1 style="text-align: center;">
        Open In Full Screen
    </h1>
    <div style="text-align: center;"><br>
        <a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
            Open Full Screen Window
        </a>
    </div>
</body>

</html>

window.open (theURL, '', 'fullscreen = yes', 'scrollbars = auto'); Il y a un problème de parens sur cette ligne
Kevin Bowersox

C'est du parent cependant. Inutile lorsque la fenêtre a déjà été ouverte.
Christian

7

Exemple simple de: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/

<script type="text/javascript">
  function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);

    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.

    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

6

Créer une fonction

function toggleFullScreen() {

            if ((document.fullScreenElement && document.fullScreenElement !== null) ||
                    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
             $scope.topMenuData.showSmall = true;
                if (document.documentElement.requestFullScreen) {
                    document.documentElement.requestFullScreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {

                  $scope.topMenuData.showSmall = false;
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }

En Html Put Code comme

<ul class="unstyled-list fg-white">

            <li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
            <li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
        </ul>

L'instruction if ne semble pas détecter cela en mode plein écran dans IE 11 (donc ne se ferme pas).
Ian

3

Maintenant que les API plein écran sont plus répandues et semblent mûrir, pourquoi ne pas essayer Screenfull.js ? Je l'ai utilisé pour la première fois hier et aujourd'hui, notre application passe vraiment en plein écran dans (presque) tous les navigateurs!

Assurez-vous de le coupler avec la :fullscreenpseudo-classe en CSS. Voir https://www.sitepoint.com/use-html5-full-screen-api/ pour en savoir plus.


Incroyable petit script. L'utiliser sur mon site Web maintenant à www.StarCommanderOnline.com. THX!
Andy

3

Heureusement pour les internautes sans méfiance, cela ne peut pas être fait avec juste du javascript. Vous auriez besoin d'écrire des plugins spécifiques au navigateur, s'ils n'existaient pas déjà, puis de faire en sorte que les gens les téléchargent. Le plus proche que vous pouvez obtenir est une fenêtre maximisée sans outil ni barre de navigation, mais les utilisateurs pourront toujours voir l'url.

window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">

Ceci est généralement considéré comme une mauvaise pratique car il supprime beaucoup de fonctionnalités du navigateur de l'utilisateur.


3

Essayez screenfull.js . C'est une belle solution multi-navigateur qui devrait également fonctionner pour le navigateur Opera.

Wrapper simple pour une utilisation multi-navigateur de l'API JavaScript plein écran, qui vous permet de mettre la page ou tout élément en plein écran. Lisse les différences d'implémentation du navigateur, vous n'avez donc pas à le faire.

Démo .


2

Cela peut soutenir

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function max()
            {
               window.open("", "_self", "fullscreen=yes, scrollbars=auto"); 
            }
        </script>
    </head>
    <body onload="max()">
        <form id="form1" runat="server">
        <div>
        This is Test Page
        </div>
        </form>
    </body>
    </html>

2

Peux-tu essayer:

<script type="text/javascript">
    function go_full_screen(){
      var elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      }
    }
</script>

<a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>


Semble échouer pour moi dans Chrome 76 sur Ubuntu
Jonathan

1

Essayez ce script

<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>

Pour appeler à partir d'un script, utilisez ce code,

window.fullScreen('fullscreen.jsp');

ou avec un lien hypertexte, utilisez ce

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>

1

Dans Firefox 10, vous pouvez faire passer la page actuelle en plein écran (véritable plein écran sans fenêtre chrome) en utilisant ce javascript:

window.fullScreen = true;

1
Le terme "supposé" est tellement surchargé dans les logiciels. Dans certains navigateurs, il est en lecture seule. Firefox 10 vous permet de le configurer.
Leopd

1

Cela fonctionnera pour afficher votre fenêtre en plein écran

Remarque: Pour que cela fonctionne, vous avez besoin d'une requête à partir de http://code.jquery.com/jquery-2.1.1.min.js

Ou créez un lien javascript comme celui-ci.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

   <div id="demo-element">
        <span>Full Screen Mode Disabled</span>
        <button id="go-button">Enable Full Screen</button>
    </div>
    <script>
    function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

    function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

    function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        if(full_screen_element === null)
            return false;
        else
            return true;
    }

    $("#go-button").on('click', function() {
        if(IsFullScreenCurrently())
            GoOutFullscreen();
        else
            GoInFullscreen($("#demo-element").get(0));
    });

    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('Full Screen Mode Enabled');
            $("#go-button").text('Disable Full Screen');
        }
        else {
            $("#demo-element span").text('Full Screen Mode Disabled');
            $("#go-button").text('Enable Full Screen');
        }
    });</script>

0

Une façon Q&D d'aller en plein écran, si vous êtes dans une situation de «kiosque», est d'alimenter un F11 dans la fenêtre du navigateur une fois qu'il est opérationnel. Ce n'est pas joli au démarrage et l'utilisateur peut être en mesure de pousser un écran tactile en haut et d'obtenir une vue semi-plein écran, mais alimenter le F11 peut faire l'affaire ou simplement commencer un projet.


0

Voici ma solution complète pour Full Screenet les Exit Full Screendeux ( un grand merci à l' aide de la réponse de la tour ci - dessus):

$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
    var element = document.body;

    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }

    $.is_fs = true;    
    $(calr).val('Exit Full Screen');
}

$.cancel_fs = function(calr)
{
    var element = document; //and NOT document.body!!
    var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;

    if (requestMethod) { // Native full screen.
    requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }    

    $(calr).val('Full Screen');    
    $.is_fs = false;
}

$.toggleFS = function(calr)
{    
    $.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}

});

// APPEL:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.