Objeto de JavaScript

Manual de referencia de JavaScript

Manual de referencia del DOM JS

Eventos de HTML DOM Objetos de Evento (Eventos)

Método requestFullscreen() del DOM HTML

requestFullscreen()Método para abrir un elemento en modo de pantalla completa.

Este método requiere un prefijo específico para funcionar en diferentes navegadores (consulte la compatibilidad del navegador a continuación).

Usodocument.exitFullscreen()Método para cancelar el modo de pantalla completa.

Sintaxis:

HTMLElement.requestFullscreen()

Ejemplo

/*　Obtener el elemento (<html>) para mostrar la página en modo de pantalla completa　*/
var elem = document.documentElement;
/*　Verificación en pantalla completa　*/
function openFullscreen() {
　　if (elem.requestFullscreen) {
　　　　　elem.requestFullscreen();
　　} else if (elem.mozRequestFullScreen) {/*　Firefox　*/
　　　　　elem.mozRequestFullScreen();
　　} else if (elem.webkitRequestFullscreen) {　/*　Chrome, Safari y Opera　*/
　　　　　elem.webkitRequestFullscreen();
　　} else if (elem.msRequestFullscreen) {　/*　IE/Edge　*/
　　　　　elem.msRequestFullscreen();
　　}
}

Prueba y mira‹/›

Compatibilidad del navegador

Los números en la tabla especifican la primera versión del navegador que completamente admite este método. Cada navegador necesita un prefijo específico del proveedor:

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

Detalles técnicos

Valor de retorno:	Ninguno

Más ejemplos

Mostrar el elemento <video> en modo de pantalla completa:

Ejemplo

/*　Obtener el elemento (<video>)　*/
var elem = document.getElementsByTagName("video")[0];
/*　Verificación en pantalla completa　*/
function openFullscreen() {
　　if (elem.requestFullscreen) {
　　　　　elem.requestFullscreen();
　　} else if (elem.mozRequestFullScreen) {/*　Firefox　*/
　　　　　elem.mozRequestFullScreen();
　　} else if (elem.webkitRequestFullscreen) {　/*　Chrome, Safari y Opera　*/
　　　　　elem.webkitRequestFullscreen();
　　} else if (elem.msRequestFullscreen) {　/*　IE/Edge　*/
　　　　　elem.msRequestFullscreen();
　　}
}

Prueba y mira‹/›

Cuando la página está en modo de pantalla completa, se puede usar CSS para establecer el estilo de la página:

Ejemplo

div:-moz-completo-screen {
　　　fondo-color: pink;
}
div:-webkit-completo-screen {
　　　fondo-color: pink;
}
div:fullscreen {
　　　fondo-color: pink;
}

Prueba y mira‹/›

Referencias relacionadas

Referencia de HTML DOM:Método document.exitFullscreen()

Referencia de HTML DOM:Atributo document.fullscreenElement

Referencia de HTML DOM:Atributo document.fullscreenEnabled

Objeto Elemento de HTML DOM

Eventos de HTML DOM Objetos de Evento (Eventos)