Objeto do JavaScript

Manual de referência do JavaScript

Manual de referência do DOM JS

Eventos do HTML DOM Objetos de Evento (Eventos)

Método requestFullscreen() do HTML DOM

requestFullscreen()Método para abrir um elemento em modo de ecrã completo.

Este método requer um prefixo específico para funcionar em diferentes navegadores (ver a compatibilidade do navegador abaixo).

Usodocument.exitFullscreen()Método para cancelar o modo de ecrã completo.

Sintaxe:

HTMLElement.requestFullscreen()

Exemplo

/*　Obter elemento (<html>) para exibir a página em ecrã completo　*/
var elem = document.documentElement;
/*　Verificação em Ecrã Completo　*/
function openFullscreen() {
　　if (elem.requestFullscreen) {
　　　　　elem.requestFullscreen();
　　} else if (elem.mozRequestFullScreen) {/*　Firefox　*/
　　　　　elem.mozRequestFullScreen();
　　} else if (elem.webkitRequestFullscreen) {　/*　Chrome, Safari e Opera　*/
　　　　　elem.webkitRequestFullscreen();
　　} else if (elem.msRequestFullscreen) {　/*　IE/Edge　*/
　　　　　elem.msRequestFullscreen();
　　}
}

Teste e Veja‹/›

Compatibilidade do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o método. Cada navegador precisa de um prefixo específico do fornecedor:

Método
requestFullscreen()	15.0 (Webkit)	9.0 (moz)	12.10(Webkit)	5.1(Webkit)	11.0 (ms)

Detalhes técnicos

Retorno:	Nenhum

Mais exemplos

Exibir elemento <video> em modo de ecrã completo:

Exemplo

/*　Obter elemento (<video>)　*/
var elem = document.getElementsByTagName("video")[0];
/*　Verificação em Ecrã Completo　*/
function openFullscreen() {
　　if (elem.requestFullscreen) {
　　　　　elem.requestFullscreen();
　　} else if (elem.mozRequestFullScreen) {/*　Firefox　*/
　　　　　elem.mozRequestFullScreen();
　　} else if (elem.webkitRequestFullscreen) {　/*　Chrome, Safari e Opera　*/
　　　　　elem.webkitRequestFullscreen();
　　} else if (elem.msRequestFullscreen) {　/*　IE/Edge　*/
　　　　　elem.msRequestFullscreen();
　　}
}

Teste e Veja‹/›

Quando a página está em modo de tela cheia, você pode usar CSS para definir o estilo da página:

Exemplo

div:-moz-completo-tela {
　　　fundo-cor: pink;
}
div:-webkit-completo-tela {
　　　fundo-cor: pink;
}
div:fullscreen {
　　　fundo-cor: pink;
}

Teste e Veja‹/›

Referências Relacionadas

Referência do HTML DOM:Método document.exitFullscreen()

Referência do HTML DOM:Propriedade document.fullscreenElement

Referência do HTML DOM:Propriedade document.fullscreenEnabled

Objeto Elemento do HTML DOM

Eventos do HTML DOM Objetos de Evento (Eventos)