javascript - pantalla - jquery fullscreen example

Cómo hacer que la ventana sea a pantalla completa con Javascript(que se extiende por toda la pantalla)

Question

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

Answer 1

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 darle información detallada sobre el modo de pantalla completa. Intente imaginar todas las ventajas posibles que puede obtener con esta tecnología: álbumes de fotos a 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 es compatible con 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á la demostración de trabajo: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Answer 2

Afortunadamente para los usuarios web confiados, esto no se puede hacer con solo javascript. Necesitarías escribir complementos específicos del navegador, si no existían, y luego conseguir que la gente los descargue. Lo más cercano que puede obtener es una ventana maximizada sin herramientas ni 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'');">

Esto generalmente se considera una mala práctica, ya que elimina muchas funciones del navegador del usuario.

Answer 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 va a pantalla completa en (casi) todos los navegadores!

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

Answer 4

Aquí está mi solución Full Screen para Full Screen y Exit Full Screen (muchas gracias por 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);" />

Answer 5

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

Answer 6

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

Answer 7

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

window.fullScreen = true;

Answer 8

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í está 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 activarlo automáticamente en la carga de la página, debe ser activado por un usuario (por ejemplo, un botón)

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

Answer 9

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

• API de pantalla completa de Chrome (sin embargo, requestFullScreen que requestFullScreen "solo funciona durante" "[m] ost UIEvents y MouseEvents, como hacer clic y pulsar el botón, etc.", "por lo que no se puede usar maliciosamente".)
• Cómo hacer un navegador a pantalla completa usando el evento clave F11 a través de JavaScript

Answer 10

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

Answer 11

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>

Answer 12

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>

Answer 13

Prueba este guion

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

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

Answer 14

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.

Answer 15

Una forma de preguntas y respuestas para ir a pantalla completa, si se encuentra en una situación de "quiosco", es colocar un F11 en la ventana del navegador después de que esté en funcionamiento. Esto no es suficiente para comenzar y el usuario podría colocar una pantalla táctil en la parte superior y obtener una vista de pantalla semi-completa, pero alimentar el F11 podría ser suficiente para comenzar un proyecto.

Answer 16

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 HTML, poner código 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>