La API de FullSreen en JavaScript

23-03-2015 - Andrés Cruz

La API de FullSreen en JavaScript In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

Ver ejemplo Descargar

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:

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.

Ver ejemplo Descargar


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!