El API de fullscreen permite visualizar un nodo del documento HTML en pantalla completa. El nodo puede ser el nodo raíz o principal y el documento completo se visualizaría utilizando la pantalla completa.
Fullscreen es compatible con IE11+, Chrome, Safari y Opera, Firefox tiene soporte parcial en versión de escritorio. En dispositivos móviles solo está implementado en Chrome para android) – caniuse.com.
requestFullscreen
Para visualizar un nodo en pantalla completa se tiene que utilizar el método requestFullScreen.
requestFullscreen necesita utilizar el prefijo de cada navegador, entonces es mejor hacer una función la cuál verifica el método compatible con el navegador que está visualizando el documento y utiliza ese método.
// nodo.requestFullscreen
function pantalla_completa(nodo) {
if (nodo.requestFullscreen) {
nodo.requestFullscreen();
} else if (nodo.msRequestFullscreen) {
nodo.msRequestFullscreen();
} else if (nodo.mozRequestFullScreen) {
nodo.mozRequestFullScreen();
} else if (nodo.webkitRequestFullscreen) {
nodo.webkitRequestFullscreen();
}
}Como medida de seguridad únicamente se puede utilizar requestFullscreen cuando el usuario realiza algún evento que lo active.
exitFullScreen
Este método se utiliza para terminar de utilizar la pantalla completa.
De manera predeterminada los navegadores implementan esta funcionalidad presionando la tecla esc. A diferencia de requestFullScreen, exitFullScreen se ejecuta como método del documento no de un nodo en específico. La implementación de exitFullScreen también utiliza los prefijos de cada navegador, entonces es conveniente hacer lo mismo que hicimos con requestFullScreen – una función que verifica y utiliza el método compatible con el navegador donde se visualiza el documento -.
// document.exitFullScreen
function cerrar_pantalla_completa( ) {
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.msExitFullScreen) {
document.msExitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}fullScreenElement
Este método nos devuelve el nodo que se está visualizando en pantalla completa.
Nos puede servir para verificar si realmente se está visualizando un nodo en particular y ajustar el estilo visual. Al igual que los otros dos métodos también tenemos que hacer una función porque utiliza prefijos.
function mostrar_elemento() {
var elemento;
if (document.fullScreenElement) {
elemento = document.fullScreenElement;
} else if (document.msFullScreenElement) {
elemento = document.fullScreenElement;
} else if (document.mozFullScreenElement) {
elemento = document.mozFullScreenElement;
} else if (document.webkitFullscreenElement) {
elemento = document.webkitFullscreenElement;
}
console.log(elemento.tagName);
}Además de los métodos de JavaScript, el API de fullscreen tiene un pseudo elemento y una pseudo clase que permiten ajustar la visualización del documento con hojas de estilo – CSS – cuando se visualiza en pantalla completa.
::fullscreen
Esta pseudo clase permite definir la presentación de los nodos cuando se visualizan en pantalla completa.
/*
Esta sintaxis funciona con el nodo que está seleccionado para ser full screen.
El nodo HTML se obtiene al utilizar documentElement
como selector.
Intenté unir los selectores en una sola línea pero no funcionó.
// Referencia de selección utilizando JavaScript
var documento = document.documentElement;
pantalla_completa(documento);
*/
html:-webkit-full-screen {
/* Declaraciones */
}
html:-moz-full-screen {
/* Declaraciones */
}
html:-ms-fullscreen {
/* Declaraciones */
}
html:fullscreen {
/* Declaraciones */
}/*
Esta sintaxis se puede aplicar a cualquier nodo que no sea el principal.
En este caso los nodos que tengan la clase esconder
no van a ser visibles en pantalla completa.
Los nodos que tengan la clase mostrar van a ser visibles
en pantalla completa.
*/
:-webkit-full-screen .esconder { display: none; }
:-moz-full-screen .esconder { display: none; }
:-ms-fullscreen .esconder { display: none; }
:fullscreen .esconder { display: none; }
:-webkit-full-screen .mostrar { display: block; }
:-moz-full-screen .mostrar { display: block; }
:-ms-fullscreen .mostrar { display: block; }
:fullscreen .mostrar { display: block; } ::backdrop
Este elemento se agrega al nodo que se encuentra en la capa superior – el nodo que se visualiza en pantalla completa -. Es la cubierta que separa el nodo de los otros elementos del documento.
Este pseudo elemento únicamente funciona con -webkit- y -ms- -. Referencia MDN.
Aunque lo probé en distintos navegadores y utilicé distintas maneras para declarar el selector no pude modificar el color de fondo – del backdrop -.
Además de poder visualizar esta publicación en pantalla completa aquí está un ejemplo de uso de fullscreen donde se puede visualizar el documento, una imagen o un video en pantalla completa.
Referencia de este documento en pantalla completa
Estilos que se aplican al documento cuando se visualiza en pantalla completa.
En este caso escondo el encabezado, la barra lateral, el pie de página y muestro un botón para regresar a la visualización normal.
:-webkit-full-screen #page-header { display: none; }
:-webkit-full-screen #sidebar { display: none; }
:-webkit-full-screen #page-bottom { display: none; }
:-moz-full-screen #page-header { display: none; }
:-webkit-full-screen #sidebar { display: none; }
:-moz-full-screen #page-bottom { display: none; }
:-ms-fullscreen #page-header { display: none; }
:-webkit-full-screen #sidebar { display: none; }
:-ms-fullscreen #page-bottom { display: none; }
:fullscreen #page-header { display: none; }
:-webkit-full-screen #sidebar { display: none; }
:fullscreen #page-bottom { display: none; }
:-webkit-full-screen #content-primary { width: 100%; }
:-moz-full-screen #content-primary { width: 100%; }
:-ms-fullscreen #content-primary { width: 100%; }
:fullscreen #content-primary { width: 100%; }
:-webkit-full-screen #pantalla_completa { display: none; }
:-moz-full-screen #pantalla_completa { display: none; }
:-ms-fullscreen #pantalla_completa { display: none; }
:fullscreen #pantalla_completa { display: none; }
#pantalla_regular { display: none; }
:-webkit-full-screen #pantalla_regular { display: block; }
:-moz-full-screen #pantalla_regular { display: block; }
:-ms-fullscreen #pantalla_regular { display: block; }
:fullscreen #pantalla_regular { display: block; }En este caso utilizo addEventListener para asociar el clic del botón a la función
requestFullScreen. En este caso no hay necesidad de utilizar attachEvent porque el API está implementada desde IE11+.
Por último utilizo document.documentElement como selector del nodo raíz del documento.
var boton_pantalla = document.getElementById('pantalla_completa');
var regresar = document.getElementById('pantalla_regular');
function pantalla_completa(nodo) {
if (nodo.requestFullscreen) {
nodo.requestFullscreen();
} else if (nodo.msRequestFullscreen) {
nodo.msRequestFullscreen();
} else if (nodo.mozRequestFullScreen) {
nodo.mozRequestFullScreen();
} else if (nodo.webkitRequestFullscreen) {
nodo.webkitRequestFullscreen();
}
}
function cerrar_pantalla_completa( ) {
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.msExitFullScreen) {
document.msExitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
boton_pantalla.addEventListener('click', function () {
var documento = document.documentElement;
pantalla_completa(documento);
});
regresar.addEventListener('click', function () {
cerrar_pantalla_completa();
});