pantalla - javascript fullscreen f11

Ejecute un sitio web en modo de pantalla completa

Question

Estoy buscando un truco para poner mi sitio web en modo de pantalla completa sin interacción humana.

Encontré algunos ejemplos usando las técnicas de HTML5, pero todo lo que necesita es ser activado por una interacción humana.

Este sitio web se mostrará en un televisor ...

Ya pienso en cargar el sitio web usando un archivo SWF en modo de pantalla completa, pero en lugar de ir en esta dirección, me gustaría enfatizar todas las posibilidades usando solo el patrón predeterminado (html, css y javascript)

Answer 1

Cuando necesitaba hacer algo similar, utilizaba una pantalla de bienvenida. El botón para continuar en modo de pantalla completa lo solicitó como un atributo de un pop JS:

 onClick="window.open(''pageName.html'', ''test'', ''fullscreen=yes'')"

Esto no es a prueba de completo, pero funcionó mejor que cualquier otro método que encontré. Es probable que no pueda hacer esto sin la interacción del usuario, por lo que usar algo como una pantalla de bienvenida le permite minimizar la intrusión a algo más comúnmente aceptado.

Answer 2

Es posible que pueda usar los métodos requestFullScreen () como se describe en https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode .

Nota: Esto aún requiere la entrada del usuario, pero evite el uso de flash.

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

toggleFullScreen();

Esto permite que la página se active a pantalla completa y podría activarse mediante la carga de la página en una página de JavaScript. Sin embargo, no hay soporte para navegadores antiguos.

Answer 3

Esto no es exactamente lo que estaba buscando el OP, pero en mi situación particular, encontré una combinación de modo quiosco y un estilo dinámico para trabajar.

Estaba buscando iniciar un navegador con una URL particular y hacer que se inicie en modo de pantalla completa. El caso de uso es poca o ninguna interacción del usuario en un terminal en una planta de fabricación con una pantalla de estado. Después del encendido, necesita mostrar solo el estado sin interacción (es decir, no mostrar ninguno de los elementos de la IU de configuración a menos que el usuario interactúe).

Quizás, no sea realista en un sitio complejo, pero mi uso fue un elemento particular de "panel" (div en este caso). Para centrarme en el div particular, escondí los otros divs y establecí los estilos en consecuencia. Si se produce una interacción del usuario para cambiar desde y hacia la pantalla completa, yo (1) uso el documento myElement regular. * RequestFullScreen (). * ExitFullscreen () llama, (2) muestra / oculta los otros divs y (3) cambia entre las siguientes clases:

.right-pane-fullscreen
{
    margin-left: 0px;
}

.right-pane-normal
{
    margin-left: 225px;
}

Discusión relacionada sobre cómo usar el modo de quiosco en Chrome (tenga en cuenta que otros procesos de Chrome que se ejecutan antes de iniciar el modo de quiosco pueden evitar que esto funcione) Abrir el navegador Chrome en ventana completa o modo de quiosco en Windows 7

Answer 4

No puede forzar que un sitio web se muestre en modo de pantalla completa.

Imagine las preocupaciones de seguridad si eso fuera posible.
Los sitios web maliciosos podrían "secuestrar" el escritorio de una persona con menos conocimientos informáticos para todo tipo de negocios dudosos.

Todas las API de pantalla completa de JS arrojarán un error como este:
"Failed to execute ''requestFullScreen'' on ''Element'': API can only be initiated by a user gesture." Si intenta simplemente llamarlo desde su código.

Estoy bastante seguro de que Flash es similar, ya que requiere la interacción del usuario para pasar a pantalla completa. De lo contrario, habríamos visto una buena cantidad de ventanas emergentes de pantalla completa que son casi imposibles de cerrar.

Answer 5

Otras respuestas ya describen cómo puede pasar a pantalla completa de una manera más o menos independiente del navegador. Sin embargo, persiste el problema de necesitar la interacción del usuario.

No puede forzar que su página web se muestre en modo de pantalla completa por razones de seguridad. La interacción del usuario es necesaria para eso.

Además, el navegador deja el modo de pantalla completa cada vez que el usuario va a otra página, incluso en el mismo sitio web, y tendrá que realizar alguna "interacción del usuario" en cada página para volver al modo de pantalla completa.
Esta es la razón por la cual su sitio web debe ser una sola página si desea que sea de pantalla completa.

Eso es lo que sugiero: use una sola página de bienvenida que tenga un iFrame oculto .

Siempre que el usuario haga clic en cualquier lugar o presione cualquier tecla, simplemente configure este iFrame para que sea de pantalla completa y muéstrelo. Cuando reciba un evento al salir del modo de pantalla completa, oculte iFrame nuevamente para mostrar splash.

Los enlaces se abren en el mismo marco de forma predeterminada, por lo que permanecerá en modo de pantalla completa hasta que el usuario lo deje explícitamente o se abran algunos enlaces en una nueva pestaña.

Aquí hay un ejemplo que funciona en Chrome:
( Véalo en acción. Utilice otras respuestas para que sea independiente del navegador).

<html>
<head>
    <script language="jscript">
        function goFullscreen() {
            // Must be called as a result of user interaction to work
            mf = document.getElementById("main_frame");
            mf.webkitRequestFullscreen();
            mf.style.display="";
        }
        function fullscreenChanged() {
            if (document.webkitFullscreenElement == null) {
                mf = document.getElementById("main_frame");
                mf.style.display="none";
            }
        }
        document.onwebkitfullscreenchange = fullscreenChanged;
        document.documentElement.onclick = goFullscreen;
        document.onkeydown = goFullscreen;
    </script>
</head>
<body style="margin:0">
    <H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
    <iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>

Sin embargo, tenga en cuenta que los sitios web a menudo no permiten la incrustación, por ejemplo, se muestran dentro de un iframe. El ejemplo usó inicialmente el sitio web de W3Schools en lugar de los documentos de Python, pero establecieron el encabezado ''X-Frame-Options'' en ''sameorigin'' (no permitir la incrustación entre sitios) y dejó de funcionar.

PD: Me gusta la idea de simular un sistema operativo completo en el navegador, ¡y es aún mejor en pantalla completa! :) ¡ Cambia tu sistema operativo!
Además, no soy un desarrollador web. Solo pensé que esta pregunta sería interesante de investigar.