Cómo - Pantalla completa
Aprenda a hacer una ventana de pantalla completa con JavaScript.
Ventana de pantalla completa
Cómo usar JavaScript para ver un elemento en modo de pantalla completa.
Haga clic en el botón para abrir el video en modo de pantalla completa:
Vídeo a pantalla completa
Para abrir un elemento en pantalla completa, usamos el element.requestFullscreen()
método:
Ejemplo
<script>
/* Get the element you want displayed in fullscreen mode (a
video in this example): */
var elem = document.getElementById("myvideo");
/* When the openFullscreen() function is executed, open the video in
fullscreen.
Note that we must include prefixes for different browsers, as
they don't support the requestFullscreen method yet */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else
if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
Documento a pantalla completa
Para abrir toda la página en pantalla completa, use document.documentElement
en lugar de . En este ejemplo, también usamos una función de cierre para cerrar la pantalla completa:document.getElementById("element")
Ejemplo
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
También puedes usar CSS para diseñar la página cuando está en modo de pantalla completa:
Ejemplo
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
páginas relacionadas
Referencia HTML DOM: El método requestFullscreen() .
Referencia HTML DOM: El método exitFullscreen() .
Referencia HTML DOM: la propiedad documentElement .