La API de FullScreen permite presentar una página web o los distintos elementos que forman la misma en pantalla completa o FullScreen, una vez que se encuentra el navegador en este modo, el navegador informa y brinda distintas opciones para salir de este modalidad.
Propiedades de la API de FullScreen
document.fullscreenEnabled
Antes de emplear esta API es aconsejable verificar si el navegador permite el modo de pantalla completa y también se puede emplear para verificar el soporte de la API en el navegador:
- true: Si el navegador permite el modo de pantalla completa.
- false: Caso contrario.
if (document.fullscreenEnabled) {
// resto del codigo
}
Métodos de la API de FullScreen
element.requestFullscreen()
Este método permite que un solo elemento obtenga la pantalla completa; por ejemplo la imagen presentada a continuación:
![](/public/images/example/javascript/fullscreen_vs_no_fullscreen.png)
Resulta muy útil para cuando se desee resaltar elementos específicos; la sintaxis sería la siguiente:
var element = document.getElementById("image").requestFullscreen();
document.exitFullscreen()
Siendo el antagónico del método element.requestFullscreen()
, este método cancela el modo FullScreen del navegador:
var element = document.getElementById("image");
element.exitFullscreen();
document.fullscreenElement()
Este otro método retorna todos los elementos del documento que actualmente está en modo pantalla completa (NULL en caso de no haber ningun elemento en este modo):
var element = document.getElementById("image");
element.fullscreenElement();
Un ejemplo de lo que podría retornar en caso de estar en modo pantalla completa:
<img id="img" src="tigre.png">
Eventos de la API de FullScreen
document.fullscreenchange
Este evento se ejecuta cada vez que se entra y/o sale del modo pantalla completa o FullScreen; su sintaxis es la siguiente:
document.addEventListener("fullscreenchange", function() {
// resto del codigo
});
document.fullscreenerror
El modo FullScreen puede fallar; por ejemplo cuando se intenta otorgar el modo de pantalla completa desde un iframe.
Consideraciones de la API de FullScreen
Debes de tener presente que es necesario emplear los prefijos según el navegador y su versión, dicho esto el siguiente código presentado permite encontrar el prefijo que emplee el navegador del usuario; y el mismo presenta algunas similitudes con el presentado hace algunas entradas llamado: Usando la API de Visibilidad de Página en JavaScript.
![Andrés Cruz Andrés Cruz](/public/images/perfil.jpg)
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter