Cómo hacer que la ventana sea de pantalla completa con Javascript (extendiéndose por toda la pantalla)

¿Cómo puedo hacer que el navegador de un visitante pase a pantalla completa usando JavaScript, de una manera que funcione con IE, Firefox y Opera?

Esto es lo más cerca que puede llegar a pantalla completa 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> 

En navegadores más nuevos como Chrome 15, Firefox 10, Safari 5.1, IE 10 esto es posible. También es posible para los IE más antiguos a través de ActiveX dependiendo de la configuración de su navegador.

Aquí se explica cómo hacerlo:

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

Obviamente, el usuario debe aceptar primero la solicitud de pantalla completa, y no es posible activarla automáticamente en la carga de la página, debe ser activada por un usuario (por ejemplo, un botón)

Leer más: https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Este código también incluye cómo habilitar la pantalla completa para Internet Explorer 9, y probablemente versiones anteriores, así como versiones muy recientes de Google Chrome. La respuesta aceptada también se puede usar para otros navegadores.

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

Fuentes:

• Chrome Fullscreen API (tenga en cuenta, sin embargo, que requestFullscreen"solo funciona durante" "[m] ost eventos UIE y MouseEvents, como clics y keydown, etc.", "por lo que no se puede utilizar con fines malintencionados").
• Cómo hacer que el navegador sea de pantalla completa usando el evento clave F11 a través de JavaScript

Aquí hay una solución completa para entrar y salir del modo de pantalla completa (también conocido como cancelar, salir, escapar)

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

Puedes usar la API de pantalla completa Puedes ver un ejemplo aquí

La API de pantalla completa proporciona una manera fácil de presentar el contenido web utilizando la pantalla completa del usuario. Este artículo proporciona información sobre el uso de esta API.

La nueva tecnología html5: la API de pantalla completa nos brinda una manera fácil de presentar el contenido de una página web en modo de pantalla completa. Estamos a punto de brindarle información detallada sobre el modo de pantalla completa. Solo trate de imaginar todas las ventajas posibles que puede obtener con esta tecnología: álbumes de fotos en pantalla completa, videos e incluso juegos.

Pero antes de describir esta nueva tecnología, debo tener en cuenta que esta tecnología es experimental y está respaldada por todos los principales navegadores. .

Puede encontrar el tutorial completo aquí: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Aquí está trabajando Demo: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

He usado esto ...

<!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>

Ejemplo 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>

Crear función

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 código HTML puesto como

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

Ahora que las API de pantalla completa están más extendidas y parecen estar madurando, ¿por qué no probar Screenfull.js? ? Lo utilicé por primera vez ayer y hoy nuestra aplicación pasa a pantalla completa en (casi) todos los navegadores.

Asegúrese de acoplarlo con la :fullscreenpseudoclase en CSS. Consulte https://www.sitepoint.com/use-html5-full-screen-api/ para obtener más información.

Afortunadamente para los usuarios web desprevenidos, esto no se puede hacer solo con JavaScript. Tendría que escribir complementos específicos del navegador, si aún no existían, y luego lograr que las personas los descarguen. Lo más cercano que puede obtener es una ventana maximizada sin herramientas o barras de navegación, pero los usuarios aún podrán ver la URL.

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

Sin embargo, esto generalmente se considera una mala práctica, ya que elimina mucha funcionalidad del navegador del usuario.

Prueba screenfull.js . Es una buena solución para varios navegadores que también debería funcionar para el navegador Opera.

Contenedor simple para el uso en varios navegadores de la API de pantalla completa de JavaScript, que le permite llevar la página o cualquier elemento a pantalla completa. Suaviza las diferencias de implementación del navegador, por lo que no tiene que hacerlo.

Demostración .

Esto puede apoyar

<%@ 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>

Puedes intentar:

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

Prueba este script

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

Para llamar desde script use este código,

window.fullScreen('fullscreen.jsp');

o con hipervínculo use esto

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

En Firefox 10, puede hacer que la página actual pase a pantalla completa (pantalla completa real sin ventana cromada) usando este javascript:

window.fullScreen = true;

Esto funcionará para mostrar su ventana en pantalla completa

Nota: Para que esto funcione, necesita una consulta de http://code.jquery.com/jquery-2.1.1.min.js

O haga que tenga un enlace javascript como este.

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

Una forma de Q&D de pasar a pantalla completa, si se encuentra en una situación de "quiosco", es alimentar un F11 a la ventana del navegador después de que esté funcionando. Esto no es un buen comienzo y el usuario puede presionar una pantalla táctil en la parte superior y obtener una vista de pantalla semi completa, pero alimentar el F11 podría ser un apuro o simplemente comenzar un proyecto.

Aquí está mi solución completa para Full Screeny Exit Full Screenambas (muchas gracias a la ayuda de la respuesta de la torre anterior):

$(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);
}

});

// LLAMANDO:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />