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

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?

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> 

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

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:

• API Chrome plein écran (notez cependant que requestFullscreen"ne fonctionne que pendant" "la plupart des événements UIE et MouseEvents, tels que les clics et les touches enfoncées, etc.", "afin qu'il ne puisse pas être utilisé de manière malveillante".)
• Comment rendre le navigateur plein écran en utilisant l'événement clé F11 via JavaScript

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

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.

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

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>

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>

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>

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.

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.

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 .

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>

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>

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>

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;

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>

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.

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