API JavaScript Fullscreen: operação em tela cheia
A API de tela inteira pode controlar a exibição de tela inteira do navegador, permitindo que um nó Element (e subnós) ocupe toda a tela do usuário. No momento, as versões mais recentes de todos os principais navegadores suportam essa API (incluindo o IE11), mas você precisa adicionar o prefixo do navegador ao usá-lo.
método
requestFullscreen()
O método requestFullscreen do nó Element pode tornar o nó em tela cheia.
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
}
launchFullscreen(document.documentElement);
launchFullscreen(document.getElementById("videoElement"));
O Firefox e o Chrome se comportam de maneira ligeiramente diferente ao aumentar o zoom em um nó. O Firefox adiciona automaticamente uma regra CSS ao nó para ampliar o elemento para o estado de tela inteira, width: 100%; height: 100%enquanto o Chrome coloca o nó no centro da tela, mantendo o tamanho original e deixando as outras partes pretas. Para fazer com que o Chrome se comporte da mesma forma que o Firefox, você pode personalizar uma regra CSS.
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
exitFullscreen()
O método exitFullscreen do objeto de documento é usado para cancelar a tela inteira. O método também é prefixado com o navegador.
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
exitFullscreen();
O usuário também pode sair da tecla de tela inteira pressionando manualmente a tecla ESC ou a tecla F11. Além disso, carregar uma nova página ou alternar entre guias ou alternar do navegador para outro aplicativo (pressionando Alt-Tab) também causará a saída do estado de tela cheia.
Atributos
document.fullscreenElement
A propriedade fullscreenElement retorna o nó Element que está no estado de tela inteira ou nulo se nenhum nó estiver no estado de tela inteira no momento.
var fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
document.fullscreenEnabled
A propriedade fullscreenEnabled retorna um valor booliano que indica se o documento atual pode ser alternado para tela cheia.
var fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
if (fullscreenEnabled) {
videoElement.requestFullScreen();
} else {
console.log('浏览器当前不能全屏');
}
evento em tela cheia
Os eventos a seguir estão relacionados a operações em tela inteira.
-
evento fullscreenchange: Acionado quando o navegador entra ou sai da tela cheia.
-
evento fullscreenerror: Disparado quando o navegador não consegue entrar em tela cheia, podendo ser por motivos técnicos ou rejeição do usuário.
document.addEventListener("fullscreenchange", function( event ) {
if (document.fullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
});
Quando o evento fullscreenchange ocorre no código acima, ele é julgado pelo atributo fullscreenElement se deve entrar em tela cheia ou sair da tela cheia.
CSS para estado de tela cheia
No estado de tela cheia, o CSS da maioria dos navegadores oferece suporte a :full-screenpseudoclasses, apenas o IE11 oferece suporte a :fullscreenpseudoclasses. Usando esta pseudo-classe, é possível definir propriedades CSS individuais para o estado de tela cheia.
:-webkit-full-screen {
/* properties */
}
:-moz-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:full-screen {
/*pre-spec */
/* properties */
}
:fullscreen {
/* spec */
/* properties */
}
/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}