DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
09-03-2015

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios una vez que el usuario no está visitando la página en cuestión; la siguiente imagen indica qué página se están visualizando y cuales no:

Página visible

Es decir, cuando el usuario se mueve a otra pestaña o minimiza la ventana; se activa un evento llamado visibilitychange para indicar que la página no esta siendo visualizada (hidden); esto puede resultar bastante útil para personalizar secciones de la página web; por ejemplo el presentado por la MDN.

En esta entrada explicaremos cómo usar la API de Visibilidad de Página que es una de otras APIs JavaScript que hemos tratado en DesarrolloLibre:

La API de Visibilidad de Página en la práctica

En esta parte nos introduciremos en el uso de la API explicando sus principales componentes.

Acceso a la API de Visibilidad de Página en JavaScript

La propiedad document.hidden permite obtener acceso a la API de Visibilidad de Página; sin embargo debido a la gran cantidad de navegadores y sus versiones es posible que algunos no soportan esta API o sea necesario emplear los prefijos.

La siguiente función permite verificar si el navegador soporta la API de Visibilidad de Página y obtener su prefijo si el mismo lo amerita; la misma puede ser fácilmente adaptada para cualquiera de las APIs de JavaScript:

	// Obtenemos el prefijo para cada navegador
	function getPrefix() {
		// verificamos si el navegador soporta el prefijo por defecto
		if ('hidden' in document) 
			return null;
		
		// otros prefijos posibles
		var prefixes = [ 'moz', 'ms', 'o', 'webkit' ];

		for (var i = 0; i API
		return null;
	}

Una vez que tengamos el prefijo del navegador para acceder a la API, podemos obtener acceso a la propiedad en cuestión mediante la siguiente función que recibe como parámetro el prefijo obtenido anteriormente:

	// Obtenemos la propiedad
	function getHiddenProperty(prefix) {
		if (prefix) {
			return prefix + 'Hidden';
		} else {
			return 'hidden';
		}
	}

Eventos de la API de Visibilidad de Página

Utilizando nuevamente el prefijo obtenido en la función definida anteriormente, obtenemos el evento visibilitychange en su variación dependiente del navegador empleado:

	// Obtenemos el prefijo para acceder al evento visibilitychange
	function getVisibilityEvent(prefix) {
		if (prefix) {
			return prefix + 'visibilitychange';
		} else {
			return 'visibilitychange';
		}
	}

Finalmente la definición del evento visibilitychange:

	// Obtenemos el prefijo para acceder al evento visibilitychange
	function getVisibilityEvent(prefix) {
		if (prefix) {
			return prefix + 'visibilitychange';
		} else {
			return 'visibilitychange';
		}
	}

Puedes ver un ejemplo final que pone en práctica todo lo visto hasta ahora:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Árbol arcoíris creciente

Árbol arcoíris creciente

Esfera de agrupación

Esfera de agrupación

Circunferencia animada con Canvas

Circunferencia animada con Canvas

Algunos artículos que te pueden interesar

¿Cómo cambiar el color progresivamente según la hora con JavaScript?

¿Cómo cambiar el color progresivamente según la hora con JavaScript?

En esta entrada veremos como cambiar el color de algún elemento de una página web según la hora del día.

Andrés Cruz 25-08-2014

Introducción a la API de Orientación de Pantalla en JavaScript

Introducción a la API de Orientación de Pantalla en JavaScript

La API de Orientación de Pantalla en JavaScript accesible a través del objeto Screen proporciona primitivas que permiten detectar la posición de la pantalla de un dispositivo, bloquear y desbloquear posiciones específicas.

Andrés Cruz 19-03-2015

¿Cómo obtener la resolución de pantalla con JavaScript?

¿Cómo obtener la resolución de pantalla con JavaScript?

En esta entrada veremos como obtener la resolución de una pantalla con JavaScript nativo.

Andrés Cruz 04-08-2014