¿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.
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadlas 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.
element
y que diferencia hay en que se use con u otro element?
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