Como fazer - tela cheia
Saiba como fazer uma janela de tela cheia com JavaScript.
Janela de tela cheia
Como usar JavaScript para visualizar um elemento no modo de tela cheia.
Clique no botão para abrir o vídeo em modo de tela cheia:
Vídeo em tela cheia
Para abrir um elemento em tela cheia, usamos o element.requestFullscreen()
método:
Exemplo
<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 em tela cheia
Para abrir a página inteira em tela cheia, use o document.documentElement
em vez de . Neste exemplo, também usamos uma função close para fechar a tela cheia:document.getElementById("element")
Exemplo
<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>
Você também pode usar CSS para estilizar a página quando estiver no modo de tela cheia:
Exemplo
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
Páginas relacionadas
Referência HTML DOM: O método requestFullscreen() .
Referência HTML DOM: O método exitFullscreen() .
Referência HTML DOM: A propriedade documentElement .