Comentario: Durante mucho tiempo nos ha perdido un método para determinar si un usuario está navegando por una pestaña especificada. ¿Los usuarios han visitado otros sitios web? ¿Han cambiado de vuelta?
Ahora, la interfaz de visibilidad de la página en HTML5 proporciona a los programadores un método para usar el evento de página de Visibilidad Change para juzgar el estado de visibilidad de la página actual y realizar ciertas tareas de manera específica. También hay un nuevo documento. Propiedad hidden que se puede usar.
document.hidden
Este documento recientemente apartado. La propiedad Hidden muestra si la página es la página actualmente vista por el usuario, con un valor de ture o falso.
document.visibilityState
El valor de VisibilityState es visible (indica que la página está actualmente activada por el navegador, y la ventana no está minimizada), o oculta (la página no está actualmente activada por la página de pestaña, o la ventana está minimizada)., O Prerender (la página está regenerando y no es visible para el usuario).
Evento de cambio de visibilidad
Es muy fácil escuchar los cambios de visibilidad de la página:
// compatible con varios navegadores
var oculto, estado, cambio de visibilidad;
if (typeof document.hidden! == "indefinido") {
oculto = "oculto";
VisibilityChange = "VisibilityChange";
state = "VisibilityState";
} else if (typeof document.mozhidden! == "indefinido") {
oculto = "mozhidden";
VisibilityChange = "MozVisibilityChange";
state = "MozvisibilityState";
} else if (typeof document.mshidden! == "indefinido") {
oculto = "mshidden";
VisibilityChange = "MSVISIBILIDCHIVE";
state = "msVisibilityState";
} else if (typeof document.webkithidden! == "indefinido") {
hidden = "webkithidden";
VisibilityChange = "WebKitVisibilityChange";
state = "WebKitVisibilityState";
} </p> <p> // Agregue un oyente para mostrar los cambios de estado en el título
document.addeventListener (VisibilityChange, function () {
document.title = documento [estado];
}, falso); </p> <p> // Inicialización
document.title = documento [estado];
¡El código anterior modificará el valor de document.title cuando cambia la visibilidad de la página!
Entonces, ¿cuándo necesitas usar el evento VisibilityChange? Por ejemplo, si hay un video incrustado en su página que se está reproduciendo, cuando el usuario cambia a otra pestaña, el video en su pestaña debe detener automáticamente la reproducción y continuar jugando cuando el usuario vuelva. Por ejemplo, si su página tiene una acción de actualización automática, cuando el usuario cambia a otras pestañas, debe dejar de actualizarse y continuar la acción anterior cuando el usuario retrocede.