DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
23-03-2015

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:

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Árbol arcoíris creciente

Árbol arcoíris creciente

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

Comenzando con Adobe PhoneGap en Windows y Android

Comenzando con Adobe PhoneGap en Windows y Android

Se explica como instalar Adobe PhoneGap en Windows y Android además de crear un proyecto y configurarlo en la aplicación móvil.

Andrés Cruz 27-01-2017

Obteniendo una captura de pantalla del portapapeles (clipboard) con JavaScript

Obteniendo una captura de pantalla del portapapeles (clipboard) con JavaScript

En esta entrada veremos como copiar una imagen producto de una captura de pantalla que se encuentre guardada de manera temporal en el portapapeles o clipboard en un elemento img.

Andrés Cruz 29-01-2015

La API Vibration (Vibración) en HTML5

La API Vibration (Vibración) en HTML5

El método vibrate del objeto navigator permite activar la vibración por hardware de un dispositivo mediante JavaScript.

Andrés Cruz 04-02-2014