web-dev-qa-db-fra.com

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

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

javascriptfullscreen
229
user63898

Ceci 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>
51
Saul Dolgin

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

Voici comment le faire:

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

Il est évident que l'utilisateur doit d'abord accepter la demande en plein écran, 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

261
Tower

Ce code indique également comment activer le plein écran pour Internet Explorer 9 et probablement des versions plus anciennes, ainsi que des 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:

62
Peter O.

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

        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;
        }
19
mike nelson

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>
8
Jerry Rutherford

La nouvelle technologie html5 - l'API plein écran nous offre un moyen simple de présenter un contenu de page Web en mode plein écran. Nous sommes sur le point de donner vous des informations détaillées sur le mode plein écran. Essayez juste de Imaginez tous les avantages possibles que vous pouvez obtenir en utilisant ceci technologie - albums photo plein écran, vidéos et même des jeux.

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

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

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

8
Dhiraj

Vous pouvez utiliser L’API plein écran Vous pouvez voir un exemple ici

L'API en plein écran offre un moyen simple pour que le contenu Web soit présenté en utilisant l'écran entier de l'utilisateur. Cet article fournit informations sur l'utilisation de cette API.

8
Sébastien Gicquel

Exemple simple tiré 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
Jacob

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, mettez le 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>
5
Dixit

Heureusement pour les internautes non avertis, cela ne peut se faire qu'avec du javascript. Vous auriez besoin d'écrire des plugins spécifiques à votre 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 agrandie 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 de nombreuses fonctionnalités du navigateur de l'utilisateur.

3
poop a birck

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 pseudo-classe :fullscreen en CSS. Voir https://www.sitepoint.com/use-html5-full-screen-api/ pour plus d'informations.

3
simonhamp

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
Srinivasan

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

Un wrapper simple pour une utilisation multi-navigateur de l'API JavaScript Fullscreen, qui vous permet d'amener la page ou tout élément en plein écran Atténue les différences d'implémentation du navigateur, pour que vous n'ayez pas à le faire.

Démo .

1
Hassan Ahmed

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

window.fullScreen = true;
1
Leopd

Essayez ce script

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

Pour appeler depuis un script, utilisez ce code,

window.fullScreen('fullscreen.jsp');

ou avec hyperlien utiliser cette

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

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>

1
Santos L. Victor

Si vous êtes dans une situation de "kiosque", un moyen de passer en mode plein écran par Q & D est de fournir un F11 à la fenêtre du navigateur une fois qu’elle est opérationnelle. Ce n’est pas une belle mise en train et l’utilisateur peut peut-être percer un écran tactile en haut et obtenir une vue en plein écran, mais nourrir le F11 peut s’avérer tout à la fois ou juste pour se lancer dans un projet.

0
Alex Robinson

Voici ma solution complète pour Full Screen et Exit Full Screen les deux (merci beaucoup à l'aide de la réponse de tower 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);" />
0
Raheel Hasan

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

Note: _ ​​Pour que cela fonctionne, vous avez besoin de Query from http://code.jquery.com/jquery-2.1.1.min.js

Ou faire avoir 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
SeekLoad