3

¿Cómo implementar un botón que inicie la pantalla completa en una app de chrome a base de html y javascript? .

He intentado con state: 'fullscreen' y métodos window.fullScreen(); y parecidos pero ninguno me ha funcionado.

1 respuesta 1

3

las APIs nuevas de Javascript vinieron a ayudar mucho, aunque todavia no son del todo conocidas.

Una muy simple y efectiva es la que nos permite activar la pantalla completa en el navegador directamente desde un botón en nuestro sitio.

function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}
// Lanza en pantalla completa en navegadores que lo soporten
 function cancelFullScreen() {
     if(document.cancelFullScreen) {
         document.cancelFullScreen();
     } else if(document.mozCancelFullScreen) {
         document.mozCancelFullScreen();
     } else if(document.webkitCancelFullScreen) {
         document.webkitCancelFullScreen();
     }
 }
<button onclick="launchFullScreen(document.documentElement);"> Entrar en pantalla completa </button>
<button onclick="cancelFullScreen();"> Salir de pantalla completa </button>

El método requestFullScreen está aún prefijado en los navegadores, por eso, hay buscarlo un poco, para que nuestra web funcione bien en cualquier browser.

Simplemente llama al request del método en el elemento que quieres en pantalla completa, y la ventana cambiará a pantalla completa.

5
  • Hola @JohnnyPachecp. Para que se usa el element y que diferencia hay en que se use con u otro element?
    – Theia
    el 30 jun. 2017 a las 17:52
  • 2
    @Theia document.documentElement devuelve un HTMLElement que hace referencia al DOM, es decir que ahora puedes tratar a todo el documento como si se tratase de un elemento normal, por lo que ahora podrás: agregar eventos document.documentElement.addEventListener(TODO) , despachar eventos document.documentElement.dispatchEvent(TODO) , acceder a sus propiedades CSS2, window.getComputedStyle(document.documentElement), y en general a todas las propiedades del prototipo HTMLElement para más información puedes acceder a ellas mediatne console.log(HTMLElement.prototype) el 30 jun. 2017 a las 18:51
  • No me funcionó en el snippet ¿Puede ser?
    – Agustin M.
    el 30 jun. 2017 a las 19:00
  • Lo que dice @Theia es totalmente cierto, gracias por brindar la respuesta... Y no funciona en el snippet por que no lo permite stackoverflow. el 30 jun. 2017 a las 21:06
  • a mi me funciona pero cuando me muevo a otro sitio en la misma pagina se quita la pantalla completa, en cambio cuando lo hago con la tecla f11 no pasa eso, como puedo hacer que se mantenga en pantalla completa?
    – CRIS19N
    el 5 ago. 2020 a las 20:31

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.