full - Establecer ventana a pantalla completa(pantalla completa REAL; funcionalidad F11) mediante javascript

javascript set full screen mode

Question

Hay varias preguntas al respecto, algunos dicen que no es posible, algunos dicen que es posible en IE, como el modo de pantalla completa de Internet Explorer. y me pregunto una solución universal y una respuesta para esto.

Estoy construyendo una página web de galería de fotos, y la galería realmente marca una diferencia cuando se ve a pantalla completa (como dice el título, estoy hablando de pantalla completa verdadera , no con barras y ventana cromada, etc.), y me gustaría colocar un botón para pantalla completa. (no, no me iré a la fuerza FS sin la intención del usuario, odio ese tipo de "funcionalidad" también) ES POSIBLE en Flash cuando se inicia a través de una acción iniciada por el usuario como el clic del botón, y me preguntaba si tal Lo que está disponible para Javascript también. Lógicamente, debería tener un mecanismo similar al modo de pantalla completa iniciado por el usuario de Flash / SL. Si no hay una funcionalidad "universal" que funcione para todos, estoy bien (mejor que nada) para la funcionalidad parcial (me refiero a APOYAR ALGUNOS de los navegadores por eso, NO establecer el ancho / alto de la ventana, etc. no vienen con respuesta diciéndole que establezca el ancho / alto de la ventana, sé cómo hacerlo, no lo estoy buscando) también.

Answer 1

El soporte de pantalla completa a través del script java no está implementado para Chrome o Firefox. Sin embargo, puede lograr tenerlo para MSIE. Pero eso tampoco es un tipo de funcionalidad F11.

Incluso chrome.exe -kiosk no abre la página en modo de pantalla completa.

La razón es que no se recomienda forzar al usuario y abrir su aplicación en modo de pantalla completa. Si esto no es todo, las ventanas emergentes de diferentes sitios web se abrirán en modo pantalla completa y terminarás cerrando todas esas ventanas.

Answer 2

Esto ahora es posible en las últimas versiones de Chrome, Firefox e IE (11).

Siguiendo los consejos de Zuul sobre este hilo , edité su código para incluir IE11 y la opción de pantalla completa de cualquier elemento de elección en su página.

JS:

function toggleFullScreen(elem) {
    // ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (elem.requestFullScreen) {
            elem.requestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

HTML:

<input type="button" value="click to toggle fullscreen" onclick="toggleFullScreen(document.body)">

Donde "document.body" es cualquier elemento que desee.

También tenga en cuenta que intentar ejecutar estos comandos de pantalla completa desde la consola no parece funcionar en Chrome o IE. Sin embargo, tuve éxito con Firebug en Firefox.

Otra cosa a tener en cuenta es que estos comandos de "pantalla completa" no tienen una barra de desplazamiento vertical, debe especificar esto dentro del CSS:

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

El "! Important" parece ser necesario para que IE lo renderice

Aquí hay un ejemplo de cómo funciona .

Answer 3

Hay una biblioteca desconocida que hace todo el trabajo por usted:

https://github.com/rafrex/fscreen

Tuve el mismo problema y lo hice (por ejemplo, en un componente de reacción):

import fscreen from ''fscreen'';
.....

if (fscreen.fullscreenElement == null) {
  fscreen.requestFullscreen(document.documentElement);
}else{
  fscreen.exitFullscreen();
}

Funciona en Chrome, Firefox, Safari, IE11, iOS, Android

Answer 4

Me pregunto por qué nadie se dio cuenta de que todas las respuestas son incorrectas.

Ajustar el elemento del cuerpo a pantalla completa no tiene el mismo comportamiento de presionar F11.

El mismo comportamiento de F11 se puede obtener mediante:

document.documentElement.webkitRequestFullScreen();   // on

y

document.webkitCancelFullScreen();  // off

También para verificar si estamos en modo de pantalla completa utilizo esta línea:

isFullScreen=()=>!(document.webkitCurrentFullScreenElement==null)

Answer 5

Puede hacer esto con un applet Java firmado que tiene permiso para ejecutar un script de automatización para emitir la pulsación de tecla para pasar al modo de pantalla completa. Pero esto es un truco total que no sería muy práctico a menos que a los usuarios no les importe que su sitio manipule sus máquinas.

Answer 6

No. Las versiones anteriores de IE (≤6) lo permitían, pero esta funcionalidad se considera un problema de seguridad, por lo que ningún navegador moderno lo permite.

Todavía puede call window.open(url,'''',''fullscreen=yes'') , lo que le permite llegar al 90%, pero tiene resultados ligeramente diferentes:

• IE abre una ventana con solo barra de título y barra de URL. La ventana tiene el tamaño para llenar toda la pantalla y cubre la barra de tareas de Windows .
• Mozilla también abre una ventana con solo la barra de título y la barra de URL. Sin embargo, la nueva ventana hereda las dimensiones de la ventana de apertura. Si la ventana de apertura está maximizada, la nueva ventana se abre al máximo. (La barra de tareas no está cubierta).
• Chrome también abre una ventana con solo la barra de título y la barra de URL. La nueva ventana hereda las dimensiones de la ventana de apertura, pero nunca se abre al máximo (incluso si la ventana de apertura está maximizada).

Esto es lo más cercano que obtendrás con JavaScript. Su otra opción sería crear algo en Flash (ugh!) , O simplemente hacer que su botón "pantalla completa" window.resize una caja de luz que diga "Presione F11 para ir a pantalla completa", y oculte el lightbox en window.resize o haga clic en un botón de cancelar en la caja de luz.

Editar: Webkit (Safari 5.1 + / Chrome 15+) y Firefox (10+) han implementado una API adecuada de pantalla completa ( propuesta por primera vez por Mozilla y luego lanzada como una propuesta W3C ). Una breve historia y ejemplos de uso aquí. Tenga en cuenta que IE10 supuestamente no admitirá la API.