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

Estoy construyendo una galería de fotos de la web, y la galería de la que realmente hace una diferencia cuando se ve a pantalla completa (como dice el título, estoy hablando de verdadero pantalla completa, no con los bares y de la ventana de chrome, etc), y me gustaría colocar un botón de pantalla completa. (no, no voy a ir con fuerza FS sin intención del usuario, odio a ese tipo de «funcionalidad» también) ES posible Que el Flash cuando se inicia a través de un usuario inicia la acción como de clic de botón, y me preguntaba si tal cosa es disponible para Javascript. Lógicamente, se debe tener un mecanismo similar a Flash/SL iniciada por el usuario modo de pantalla completa. Si no hay un «universal» de la funcionalidad que va a trabajar para todos, yo estoy bien (mejor que nada) por parciales de funcionalidad (me refiero a el apoyo de ALGUNOS de los navegadores por que, NO ventana de ajuste de la anchura/altura etc. no vienen con respuesta diciendo para establecer la anchura de la ventana/de la altura, yo sé cómo hacerlo, NO estoy buscando demasiado.

  • Supongo que lo que, no es posible! 🙂 Del navegador JavaScript está bloqueado en estos días. Si era el 1999, podríamos hacerlo.
  • posibles duplicados de la Fuerza de Chrome/Firefox en Pantalla Completa?
  • de verdad que no. Que preguntas acerca de la prevención de usuario de salir del modo de pantalla completa.
  • Bastante justo… pero el punto es que esta pregunta se ha hecho varias veces, la respuesta es siempre «No, usted no puede hacer eso a menos que usted está haciendo una extensión». stackoverflow.com/search?q=firefox+full+screen
  • la mayoría de esas preguntas bien dicen para cambiar el tamaño de la ventana a la anchura/altura de pantalla, o sólo digo que no es posible. pero algunas fuentes (como el que he publicado en la pregunta) dicen que es posible, en cierta medida, y he abierto la pregunta pensé que esas preguntas, mientras que cerca, no responder exactamente a mi pregunta y yo no quería resucitar a los muertos temas.
  • La pregunta que el enlace aquí se aplica a la IE. Como usted puede ser consciente, es decir, es notorio para proporcionar funcionalidad que ningún otro navegador, de hecho, esta puede ser una de las razones por las que el uso de Internet Explorer ha sido, y es, por lo general se aconseja en contra. Sé que me estremezco de horror cada vez que tengo que ir a casa y ver a abrirlo en casa de mis padres equipo a pesar de mi instando al contrario. Cuando usted toma esto en cuenta, el hecho de que es posible que en IE debiera llevar a creer que hay un camino en otros navegadores y la gente que diga lo contrario simplemente no saben el secreto. No se puede hacer, por una buena razón
  • Yo pienso lo mismo acerca de IE (aunque creo que va en el camino correcto ahora últimamente), pero si IE puede hacerlo, pensé que tal vez otros también pueden. La capacidad de hacer lo mismo en Flash/SL aumentada mis creencias acerca de que tal vez son sólo el uso de algunos de funcionamiento del navegador para ir a FS. y puede haber otras maneras de utilizar los plugins de funcionalidad demasiado (sí, estoy de acuerdo, se va fuera de tema, tal vez mi declaración inicial acerca de pedir un javascript única solución es incorrecta).

6 Comentarios

  1. 35

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

    Siguiendo los punteros por Zuul en este hilo, he editado 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 «el documento.cuerpo» es cualquier elemento que así lo deseen.

    También tenga en cuenta que tratando de ejecutar estos comandos de la pantalla de la consola no parecen funcionar en Chrome o IE. Me hizo tener éxito con Firebug en Firefox, aunque.

    Otra cosa a tener en cuenta es que estos «pantalla completa» comandos no tienen una barra de desplazamiento vertical, deberá especificar esto en el CSS:

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

    El «!importante» parece ser necesaria para que IE hacen

    He aquí un ejemplo de trabajo.

    • Esto es útil. Gracias.
    • esto es genial (Y)
    • Pasado por casi todos los relacionados con la threds. Me salvó el día. Gracias 🙂
    • Si desea mantener el cuerpo de la barra de desplazamiento y de fondo, se puede intentar aplicar el toggleFullScreen función en el documento.documentElement en lugar del documento.cuerpo.
    • Es que funcione en los navegadores móviles?
    • Woot! Otro frontend dev llamado Jamie Barker! Debemos tener una cerveza si tu alguna vez en Nueva Zelanda, el hno. Saludos!

  2. 8

    No. Las versiones antiguas de IE (≤6) permitido, pero esta funcionalidad es visto como un problema de seguridad, por lo que no moderno navegador lo permite.

    Usted todavía puede llame window.open(url,'','fullscreen=yes'), que recibe el 90% del camino, pero tiene resultados ligeramente diferentes:

    • Es decir, se abre una ventana con sólo la barra de título y barra de URL. La ventana es de tamaño hasta ocupar toda la pantalla, y cubre la barra de tareas de Windows.
    • Mozilla también se abre una ventana con sólo la barra de título y barra de URL. Sin embargo, la nueva ventana hereda la apertura de la ventana de dimensiones. Si la ventana está maximizada, el nuevo se abre la ventana maximizada. (La barra de tareas no está cubierto.)
    • Chrome también se abre una ventana con sólo la barra de título y barra de URL. La nueva ventana hereda la apertura de la ventana de dimensiones, pero es nunca se abrió maximizada (incluso si la ventana está maximizada).

    Esto es lo más cerca que vas a conseguir con JavaScript. la otra opción sería la de construir algo en Flash (ugh!), o simplemente tener su «pantalla completa» botón de un cuadro emergente que dice «Presione F11 para ir a pantalla completa», y ocultar la caja de luz en window.resize o haciendo clic en un botón cancelar en la caja de luz.


    Edición: Una adecuada la API de pantalla completa (primera propuesto por Mozilla y más tarde se publicó como una W3C propuesta) ha sido implementado por Webkit (Safari 5.1+/Chrome 15+) y Firefox (10+). Una breve historia y ejemplos de uso aquí. Nota que IE10 pretendidamente no apoyo de la API.

    • gracias por la aclaración. así que pueden Flash o Silverlight de control de la ventana para ir a pantalla completa de alguna manera? igual que a veces esconde un objeto flash en una página se utiliza en algunos sitios para llevar a cabo de otra manera sería imposible (sin flash) operaciones, buscando algo así…
    • No. Cuando Flash/Silverlight va a pantalla completa, el plugin crea su propia ventana que se maneja fuera del navegador del conocimiento. El plugin nunca tiene el control sobre la ventana del navegador original.
    • bueno, acabo de recibir el «chapucero» la idea, donde yo podría poner un silverlight «botón» y después haga clic en, que van de la FS en sí mismo, creando un control de explorador web de asumir el 100% del espacio, y la carga de la dirección URL de la página actual dentro de sí mismo. pero creo que sería restringir demasiado, ya que no se ejecutan dentro de la ventana del navegador, pero a lo mejor funciona en pantalla completa, vale la pena intentarlo.
    • href=»http://msdn.microsoft.com/en-us/library/system.windows.controls.webbrowser(v=vs 95).aspx» >Silverlight no permite un control WebBrowser en las aplicaciones basadas en explorador.
    • ¿»dentro del navegador» aplicar a modo de pantalla completa también? no es realmente «en» el navegador, crea su propia ventana, como usted ha dicho, a lo mejor funciona en pantalla completa, y sólo tengo en pantalla completa de todos modos, lo que puede ayudar mi problema si me pueden interactuar con el ratón.
    • Es el origen de la política. Que significa que una aplicación de Silverlight alojado a (embedded) en una página web puede utilizar el control WebBrowser, independientemente de si utiliza el modo de pantalla completa. También, MSDN dice, cuando se utiliza el control WebBrowser en una aplicación de Silverlight en modo de pantalla completa, el WebBrowser no es interactivo, de modo que usted todavía está atascado.
    • bueno, ok, me parece que no puede conseguir es, me doy por vencido 🙂 pero gracias por aclarar de nuevo.
    • La pantalla completa situación ha cambiado recientemente. Ver ediciones.
    • gracias, voy a dar una oportunidad pronto 🙂
    • En el móvil se sigue preguntando para mostrar la ventana emergente o no, Como un bucle

  3. 3

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

    Ajuste el elemento de cuerpo a pantalla completa hace no tienen el mismo comportamiento de pulsar F11.

    El mismo comportamiento de F11 puede ser obtenida por:

    document.documentElement.webkitRequestFullScreen();   //on

    y

    document.webkitCancelFullScreen();  //off

    también para comprobar si estamos en modo de pantalla completa yo uso esta línea:

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

    Nota:
    este debe ser llamado desde dentro de la interacción de un usuario de evento (onclick, onkeydown, etc).

    • No trabajo para navegadores móviles
    • debe ser llamado desde el interior de un evento como un clic del ratón o un keydown. funciona en el móvil de chrome también…
    • a mi me funciona gracias
    • No estoy seguro de que esto es cierto, al menos no para Chrome 71. documento.documentElement.webkitRequestFullScreen() devuelve un error: TypeError: Error al ejecutar ‘requestFullscreen’ en ‘Elemento’: parámetro 1 (‘opciones’) no es un objeto. los Demás tienen el mismo problema. Pero presionando F11 todavía funciona.
    • Estoy ejecutando la Versión 71.0.3578.98 (Oficial Construir) (64-bit) Y funciona incluso en la consola de javascript (puede que aparezca pulsando control+shift+j) y si se escribe «documento.documentElement.webkitRequestFullScreen();» de HECHO, ir a la pantalla completa. En un programa normal de todos modos debe ser dentro de un onclick o onkeydown o evento similar.
    • Curiosamente, pasando document.documentElement en la función, mi respuesta funciona bien. Al menos en Chrome de todos modos teniendo en cuenta su respuesta sólo se dirige a los navegadores Webkit. En efecto, usted acaba de duplicar mi respuesta para un navegador en particular. Seguramente hubiera sido más útil a la comunidad, para agregar un comentario a mi respuesta sugiriendo a la gente que use document.documentElement en lugar de document.body en mi ejemplo. Este es suponiendo que funciona en todos los navegadores y no sólo en Chrome, aunque.
    • Obviamente. 🙂 🙂

  4. 1

    Usted puede hacer esto con un subprograma java que tiene permiso para ejecutar un script de automatización para la emisión de la tecla para entrar en modo de pantalla completa. Pero, esto es un total hack que no sería muy práctico a menos que sus usuarios no les importa su sitio manipular sus máquinas.

    • applet de java es «demasiado» chapucero, un método de secuencia de comandos es más preferible, pero si puedo hacerlo con Flash (o menos, preferiblemente, silverlight es aún menos común), que también sería una solución, pero, por supuesto, el objeto sólo se utiliza para pantalla completa de la ventana del navegador y nada más
  5. 0

    Hay un desconocido de la biblioteca que hace todo el trabajo por usted:

    https://github.com/rafrex/fscreen

    Yo tenía el mismo problema y lo que hice (por ejemplo, en un reaccionan componente):

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

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

  6. -1

    Soporte de pantalla completa a través de la secuencia de comandos de java no está implementado para Chrome o Firefox. Sin embargo, usted puede llegar a tener para los MSIE. Pero eso no es también F11 tipo de funcionalidad.

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

    Razón es que no es recomendable para obligar a los usuarios y abrir la aplicación en modo de pantalla completa. Si esto no es todos los pop-ups de diferentes sitios web se abrirá en modo de pantalla completa y se le endup el cierre de todos los.

Dejar respuesta

Please enter your comment!
Please enter your name here