Morton 30 de octubre de 2014 a las 07.39
   Imprimir artículo
elWebmaster.com

C√≥mo detectar si la pesta√Īa es visible con HTML5


html5logowideUna herramienta que puede ser de utilidad es la de poder detectar si el usuario est√° viendo una determinada pesta√Īa (la nuestra), u otra. Para saberlo, podemos usar la API de Visibilidad de P√°gina que nos ofrece HTML5., que nos permite reaccionar a los cambios en la visibilidad .
Para hacerlo podemos utilizar el evento visibilitychange document. Las propiedades document.hidden y document.visibilityChange también están disponibles.

document.hidden devuelve true si la p√°gina no est√° visible.

document.visibilityState ser√° visible si la p√°gina est√° en la pesta√Īa delantera de una ventana no minimizada, hidden si est√° en una pesta√Īa de fondo o en una ventana minimizada y prerender si el contenido de la p√°gina est√° siendo precargado y no es visible para el usuario.

Para escuchar los cambios de visibilityChange solo necesitamos un poco de JavaScript:

var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") {
	hidden = "hidden";
	visibilityChange = "visibilitychange";
	state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
	hidden = "mozHidden";
	visibilityChange = "mozvisibilitychange";
	state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
	hidden = "msHidden";
	visibilityChange = "msvisibilitychange";
	state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
	hidden = "webkitHidden";
	visibilityChange = "webkitvisibilitychange";
	state = "webkitVisibilityState";
}

// Aqu√≠ podemos a√Īadir un evento que cambia constantemente 
el título de la página
document.addEventListener(visibilityChange, function() {
	document.title = document[state];
}, false);

// Configura el valor inicial
document.title = document[state];

Eso es todo. ¬°Esperamos que te sea de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Dise√Īo Web dice:

    Muy interesante tu aportacion

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder