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

Librería para gestos

Librería para gestos

Partículas con Canvas en JavaScript

Partículas con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Algunos artículos que te pueden interesar

Cómo habilitar el Instant Payment Notification (IPN) en PayPal

Cómo habilitar el Instant Payment Notification (IPN) en PayPal

Se explica cómo configurar el Instant Payment Notification (IPN) desde nuestro perfil de desarrollo en PayPal.

Andrés Cruz 23-09-2016

Primeros pasos con SQLite en JavaScript: los métodos openDatabase, executeSql y executeSql

Primeros pasos con SQLite en JavaScript: los métodos openDatabase, executeSql y executeSql

Con SQLite en HTML5 se puede almacenar información persistente de distintos tipos (del usuario, control, etc) con JavaScript empleando los métodos openDatabase, executeSql y executeSql.

Andrés Cruz 18-01-2016

¿Cómo publicar un post en nuestro muro con la API Graph API de Facebook (PHP)?

¿Cómo publicar un post en nuestro muro con la API Graph API de Facebook (PHP)?

Explicamos como obtener los tokens de autenticación desde la página de desarrolladores de Facebook, descargar la SDK de Facebook para PHP, solicitar los permisos, autenticarse y publicar un post en el muro de Facebook.

Andrés Cruz 27-06-2016