API de visibilidad de página -

Un evento que siempre ha faltado en el documento es una señal de cuando el usuario está mirando una pestaña determinada u otra pestaña. ¿Cuándo el usuario desconecta nuestro sitio para mirar otra cosa? ¿Cuándo regresan? La API de visibilidad de página permite a los desarrolladores reaccionar a los cambios en la visibilidad de la página a través del visibilitychange documentevento. Nuevas document.hiddeny document.visibilityChangepropiedades también están disponibles.

documento.oculto

Esta nueva propiedad del documento, document.hiddendevuelve verdadero, la página no está visible actualmente.

documento.visibilidadEstado

Será (la página es la pestaña de primer plano de una ventana no minimizada), (el documento es una pestaña de fondo o parte de una ventana minimizada) o visibilityState(el contenido de la página se está renderizando previamente y no es visible para el usuario ).visiblehiddenprerender

Evento de cambio de visibilidad

Escuchar cambios en la visibilidad de la ventana es tan fácil como:

// Adaptado ligeramente de Sam Dutton// Establecer el nombre de la propiedad oculta y el evento de cambio de visibilidad// ya que algunos navegadores solo ofrecen soporte con prefijo del proveedor oculto, estado, visibilidadCambio; if (typeof document.hidden!== "indefinido") {hidden = "oculto";visibilityChange = "visibilitychange";state = "visibilityState";} else if (typeof document.mozHidden!== "indefinido") {hidden = "mozHidden";visibilityChange = "mozvisibilitychange";state = "mozVisibilityState";} else if (typeof document.msHidden! == "undefinido") {hidden = "msHidden";visibilityChange = "msvisibilitychange";state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefinido") {hidden = "webkitHidden";visibilityChange = "webkitvisibilitychange";state = "webkitVisibilityState";}// Agrega un oyente que cambia constantemente el títulodocument.addEventListener(visibilityChange, function() {document.title = documento[estado];}, false);// Establece el valor inicialdocument.title = documento[estado];

¡El ejemplo anterior cambia la document.titlepropiedad durante cada cambio de visibilidad!

Soporte visibilityChangeen MooTools

MooTools no es compatible visibilityChangede forma inmediata, por lo que deberás agregar este fragmento de JavaScript:

// ¡Configúralo!Element.NativeEvents[visibilityChange] = 2;Element.Events[visibilityChange] = {base: visibilidadChange,condición: función(evento) {evento[estado] = documento[estado];event.visibilityState = documento[ estado ];return true;}};// ¡Ahora úsalo!document.addEvent(visibilityChange, function(e) {document.title = document[state];});

¿No te encanta cuando es así de fácil? Esto refleja el código necesario para agregar onMessageeventos a la lista de eventos admitidos.

Entonces, ¿para qué podría visibilitychangeusarse? Puede dejar de actualizar el contenido periódicamente cuando la página ya no esté visible y luego extraer contenido nuevo cuando la página vuelva a ser visible. Puedes pausar y reanudar un vídeo durante los cambios de visibilidad. Audio también. Puede ajustar las estadísticas de su sitio para contar solo el tiempo pasado en el sitio mientras la página está visible. ¡Hay muchas cosas que puedes hacer! Entonces… la pregunta es… ¿qué harías con esto?