Elcambio de visibilidadEl evento se activa en el documento cuando el contenido de su pestaña se vuelve visible o se oculta.
El evento no es cancelable.
Sintaxis
Use el nombre del evento en métodos comoagregarEventListener()o establecer una propiedad de controlador de eventos.
js
agregarEventListener("cambio de visibilidad", (evento) => {});cambio de visibilidad = (evento) => {};Tipo de evento
un genéricoEvento.
Notas de uso
El evento no incluye el estado de visibilidad actualizado del documento, pero puede obtener esa información del documentoestado de visibilidadpropiedad.
Este evento se dispara con unestado de visibilidaddeocultocuando un usuario navega a una página nueva, cambia de pestaña, cierra la pestaña, minimiza o cierra el navegador o, en dispositivos móviles, cambia del navegador a una aplicación diferente. Transición aocultoes el último evento que la página puede observar de manera confiable, por lo que los desarrolladores deben tratarlo como el final probable de la sesión del usuario (por ejemplo, paraenviar datos analíticos).
La transición aocultotambién es un buen punto en el que las páginas pueden dejar de realizar actualizaciones de la interfaz de usuario y detener cualquier tarea que el usuario no quiera que se ejecute en segundo plano.
Ejemplos
Pausar la música al pasar a oculto
Este ejemplo comienza a reproducir una pista de música cuando el documento se vuelve visible y detiene la música cuando el documento ya no está visible.
js
documento.agregarEventListener("cambio de visibilidad", () => { si (documento.estado de visibilidad=== "visible") {música de fondo.jugar(); } demás {música de fondo.pausa(); }});Envío de análisis de fin de sesión sobre la transición a oculto
Este ejemplo trata la transición aocultocomo el final de la sesión del usuario, y envía los análisis apropiados usando elNavigator.sendBeacon()API:
js
documento.cambio de visibilidad = () => { si (documento.estado de visibilidad=== "oculto") {navegador.enviarBeacon("/registro",análisis de datos); }};Especificaciones
| Especificación |
|---|
| Estándar HTML # evento-cambio de visibilidad |
| Estándar HTML # handler-onvisibilitychange |
Compatibilidad del navegador
Las tablas BCD solo se cargan en el navegador
Ver también
- API de visibilidad de página
Documento.visibilityState- No pierda el estado del usuario y de la aplicación, use la visibilidad de la páginaexplica en detalle por qué debería usar
cambio de visibilidad, noantes de descargar/descargar. - API de ciclo de vida de la páginabrinda orientación sobre las mejores prácticas para manejar el comportamiento del ciclo de vida de la página en sus aplicaciones web.