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

Wave World con Canvas

Wave World con Canvas

Librería para gestos

Librería para gestos

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Algunos artículos que te pueden interesar

La API Battery (Batería) en HTML5

La API Battery (Batería) en HTML5

La API de la batería en JavaScript provee información sobre el nivel de carga actual del dispositivo.

Andrés Cruz 17-11-2014

Plugin para las Cookies en JavaScript

Plugin para las Cookies en JavaScript

Se explica los métodos básicos para emplear el plugin JavaScript Cookies el cual permite emplear las Cookies fácilmente.

Andrés Cruz 25-08-2017

Autenticación social con HybridAuth en redes sociales con PHP

Autenticación social con HybridAuth en redes sociales con PHP

Se explica cómo autenticar mediante las redes sociales a las aplicaciones creadas en PHP empleando HybridAuth como librería; además se explica como configurar las redes de Google+ y Twitter.

Andrés Cruz 14-04-2016