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


253

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


29
su aplicación interna, no para el público. No voy a abusar de nadie
user63898

2
Podría, pragmáticamente, preguntar al usuario: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

66
Tengo curiosidad por cómo funciona la pantalla completa de YouTube. Alguien sabe la respuesta?
Kasturi

66
esto lo hace el reproductor flash, no el navegador
user63898

55
Para una visión general del estado del arte, mira aquí: hacks.mozilla.org/2012/01/…
loomi

Respuestas:


54

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> 

mira el enlace / respuesta aceptada en el enlace haim evgi publicado ... se supone que no puedes cambiar el tamaño del navegador. Sin embargo, puede maximizar la ventana dentro de los navegadores (que como yo lo leo)
Lexu

44
Depende de la configuración de permisos de JavaScript en Opciones. Puede alternar el control js sobre las características de la ventana.
garrow

3
Esto sucedió la última vez que un sitio usó un código como ese y no lo bloqueé
Quentin

2
Eche un vistazo a la API webkit-fullscreen: bleeding-edge-tlv.appspot.com/#28 (de # gdd2011)
Christian Kuetbach

17
ESTO ES VIEJO. ¡MIRE ABAJO LA SOLUCIÓN!
Keavon el

281

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


3
Actualmente disponible en Chrome 15, Firefox 10 y Safari 5.1. Consulte esta publicación del blog hacks.mozilla.org para obtener detalles sobre el estado actual del juego.
Simon Lieschke

10
Fantástico, ¿alguna forma de salir de pantalla completa?
Christopher Chase

2
Unas pocas cosas. En IE, esto obviamente ignorará el elemento y la pantalla completa de todo. Si desea pasar a pantalla completa, todo lo que pasa document.documentElementasegurará que obtendrá el elemento raíz correcto ('html' o 'cuerpo'). Y use puede usar cancelFullscreen()para cerrarlo (o enviar 'F11' nuevamente para IE).
Matthew Wilcoxson

66
Solo puede ser activado por el usuario (por ejemplo, a través de un botón de pantalla completa). La pantalla completa automática durante la carga no es posible.
A. KR

3
error de ortografía para IE, debería ser msRequestFullScreen, como en los documentos msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx
DanielB

66

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:


Funciona en IE 8 arriba, FF10 arriba (probado en FF 9, no funciona), probado en Chrome 18
Treby

@ Peter O. "debe colocarse en un controlador de eventos", ¿alguna forma de activarlo al cargarlo?
Francis P

@FrancisP: No; ni "load" ni "DOMContentLoaded" es un UIEvent o MouseEvent aplicable para la API de pantalla completa.
Peter O.

2
Gracias por "(tenga en cuenta, sin embargo, que requestFullScreen" solo funciona durante "" [m] ost eventos UIE y MouseEvents, como clic y keydown, etc. "," por lo que no se puede usar maliciosamente ".)"

Sí, documentElementes mejor que bodypara mí.
Matt

24

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

1
¿Qué hay de msIsFullScreen?
kangax

1
La especificación ha cambiado. webkitCancelFullScreenes ahora webkitExitFullscreen. generatecontent.org/post/70347573294/…
Doug S

la primera parte de esta lógica y operación es redundante y debe eliminarsedocument.fullScreenElement && document.fullScreenElement !== null
consideRatio

cambiar el elemen toggleFull()de document.bodya document.documentElementpara fijar la izquierda y la cuestión margen derecho
Firnas


8

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


1
@ Ian está trabajando en IE edge. La versión anterior de IE no es compatible con esto.
Dhiraj

8

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>

window.open (theURL, '', 'fullscreen = yes', 'scrollbars = auto'); Hay un problema de parens en esta línea
Kevin Bowersox

Sin embargo, eso es de los padres. No es útil cuando la ventana ya se ha abierto.
Christian

7

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>

6

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>

si la declaración no parece detectar eso en modo de pantalla completa en IE 11 (por lo que no se cierra).
Ian

3

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.


Pequeño guión increíble. Utilizándolo en mi sitio web ahora en www.StarCommanderOnline.com. ¡Gracias!
Andy

3

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.


3

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 .


2

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>

2

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>


Parece que me falla en Chrome 76 en Ubuntu
Jonathan

1

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>

1

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;

1
El término "supuestamente" está tan sobrecargado en el software. En algunos navegadores es de solo lectura. Firefox 10 te permite configurarlo.
Leopd

1

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>

0

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.


0

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);" />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.