Exemple d'utilisation des nouvelles fonctionnalités de HTML5 pour surveiller facilement la touche retour de n'importe quelle application

De nos jours, h5 propose de nombreuses nouvelles fonctionnalités, de nouvelles balises, de nouvelles spécifications, etc., et elles sont constamment améliorées. Le support des principaux fournisseurs de navigateurs est également assez solide. En tant que programmeurs front-end, je pense que nous devons toujours y prêter attention et le pratiquer courageusement. Ensuite, je partagerai avec vous une nouvelle fonctionnalité très utile de h5 (elle n'est pas particulièrement nouvelle pour le moment), qui permet de surveiller facilement la touche retour de n'importe quelle application, y compris la touche retour physique sur les machines Android, afin de répondre davantage besoins dans le développement de projets.

Il y a environ six mois, j'ai reçu une demande de PM pour utiliser pure h5 pour réaliser la lecture, la pause et la reprise du multi-audio. La page est placée dans l'application Driving Test Guide, et il n'y a aucune interaction avec le client. donc les js liés au client n'ont pas besoin d'être référencés. Il semble que cette exigence soit assez simple, même si je n'ai jamais formulé d'exigence similaire auparavant. Quoi qu’il en soit, retroussez vos manches et faites-le. Le parcours d’apprentissage a commencé.

Alors pourquoi devrais-je surveiller ? Je dois le souligner encore et encore. Qu'il s'agisse de WeChat, QQ, App ou du navigateur d'un téléphone Apple, lorsqu'il s'agit d'audio et de vidéo, le système mettra automatiquement en pause la lecture en cours lors du retour à la page précédente, mais tous les téléphones Android ne peuvent pas le faire. Nous devons donc personnaliser nous-mêmes le suivi. De nombreux amis peuvent d'abord penser à Baidu, puis la réponse n'est rien de plus que ceci

 pushHistory(); window.addEventListener(popstate, function(e) { alert(J'ai écouté l'événement du bouton retour du navigateur);//Implémentez vos propres fonctions en fonction de vos propres besoins}, false); = { titre : titre, url : # } ; window.history.pushState (état, titre, # });

Cela vous semble-t-il familier ? Cependant, les exigences clés n'ont pas pu être parfaitement réalisées. À ce moment-là, je me creusais la tête sur l'utilité de ce code. Ce n’est que lorsque j’ai été guidé par un grand ami que j’ai copié ce code.

 var HiddenProperty = 'hidden' dans le document ? 'hidden' : 'webkitHidden' dans le document ? 'webkitHidden' : 'mozHidden' dans le document ? );var onVisibilityChange = function(){ if (!document[hiddenProperty]) { console.log('Page inactive'); }else{ console.log('Page activée') }}document.addEventListener(visibilityChangeEvent, onVisibilityChange);

Tous les problèmes sont résolus.

Ma compréhension personnelle du principe de ce code est d'effectuer des opérations associées en déterminant si l'utilisateur navigue sur la page en cours.

Voici le lien associé à MDN : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden

Ce n’est pas que vous puissiez réellement surveiller le bouton de retour intégré dans l’application via JS, ni même le bouton de retour physique sur Android, mais vous pouvez rapidement comprendre vos besoins en changeant votre façon de penser. J'espère que cette fonctionnalité pourra vous aider.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.