Ejemplo de uso de las nuevas funciones HTML5 para monitorear fácilmente la clave de retorno de cualquier aplicación

Hoy en día, h5 tiene muchas características nuevas, nuevas etiquetas, nuevas especificaciones, etc., y se mejoran constantemente. El soporte de los principales proveedores de navegadores también es bastante sólido. Como programadores front-end, creo que todavía debemos prestar atención activamente y practicar con valentía. A continuación, compartiré con ustedes una nueva característica muy útil de h5 (no es particularmente nueva en este momento), que puede monitorear fácilmente la clave de retorno de cualquier aplicación, incluida la clave de retorno física de los teléfonos Android, para conocer más necesidades en el desarrollo del proyecto.

Hace aproximadamente medio año, recibí una solicitud de PM para usar h5 puro para realizar la reproducción, pausa y reanudación de audio múltiple. La página se coloca en la aplicación Guía de examen de conducción y no hay interacción con el cliente. por lo que no es necesario hacer referencia a js relacionados con el cliente. Parece que este requisito es bastante simple, aunque nunca antes había hecho un requisito similar. Pase lo que pase, simplemente arremángate y hazlo. El viaje de aprendizaje comenzó.

Entonces, ¿por qué debería monitorearlo? Necesito enfatizarlo una y otra vez. Ya sea WeChat, QQ, la aplicación o el navegador de un teléfono Apple, cuando se trata de audio y video, el sistema pausará automáticamente la reproducción actual al regresar a la página anterior, pero no todos los teléfonos Android pueden hacer esto. Por eso debemos personalizar el seguimiento nosotros mismos. Muchos amigos pueden pensar primero en Baidu y luego la respuesta no es más que esta

 pushHistory(); window.addEventListener(popstate, function(e) { alert(escuché el evento del botón Atrás del navegador);// Implementa tus propias funciones según tus propias necesidades}, false); = { título: título, url: # };

¿Te resulta familiar? Sin embargo, los requisitos clave no se podían cumplir perfectamente. En ese momento me devané los sesos sobre el uso de este código. No fue hasta que un gran amigo me guió que copié este código.

 var HiddenProperty = 'oculto' en el documento? 'oculto': 'webkitHidden' en el documento? 'webkitHidden': 'mozHidden' en el documento? 'mozHidden': null;var visibilidadChangeEvent = ocultoProperty.replace(/hidden/i, 'visibilitychange' );var onVisibilityChange = función(){ if (!document[hiddenProperty]) { console.log('Página inactiva'); }else{ console.log('Página activada') }}document.addEventListener(visibilityChangeEvent, onVisibilityChange);

Todos los problemas están resueltos.

Mi comprensión personal del principio de este código es realizar operaciones relacionadas determinando si el usuario está navegando en la página actual.

Este es el enlace relacionado con MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden

No es que realmente puedas monitorear el botón Atrás incorporado en la aplicación o incluso el botón Atrás físico de Android a través de JS, pero puedes darte cuenta rápidamente de tus necesidades cambiando tu forma de pensar. Espero que esta función pueda ayudarte.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.