Utilisation des nouvelles fonctionnalités h5 : surveillance de la touche retour fournie avec l'application

Cet article vous présente l'article sur l'utilisation des nouvelles fonctionnalités de h5 pour surveiller facilement la clé de retour de n'importe quelle application. Il a une bonne valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

1. Avant-propos

Aujourd'hui, 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.

2. Cause

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. Application de livret de test de conduite et connectée au client. Il n'y a aucune interaction, 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é.

3. Ici, je vais me concentrer sur la façon dont je surveille le bouton de retour fourni avec n'importe quelle application, ainsi que le bouton de retour physique sur les téléphones Android.

Alors pourquoi devrais-je surveiller ? J'ai besoin de 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, et la réponse qu'ils trouvent n'est rien de plus que ceci

pushHistory(); 
window.addEventListener("popstate", function(e) { 
    alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
}, false); 
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#"
    }; 
    window.history.pushState(state, "title", "#"); 
}

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. Jusqu'à ce que je copie ce code sous la direction d'un grand ami

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (document[hiddenProperty]) {    
        console.log('页面非激活');
    }else{
        console.log('页面激活')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

tous les problèmes étaient 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....

4. Compatibilité avec les téléphones mobiles

Comme nous le savons tous, les systèmes Android actuels tels que 4.0 et autres sont des versions discrètes. La plupart des téléphones Android peuvent reconnaître cet attribut, mais Android personnel est discret. les téléphones ne peuvent pas le reconnaître, la raison est que la version du noyau de navigator.userAgent est trop basse et que de nombreuses versions de Chrome sont maintenant 64+, donc si vous rencontrez ce problème, trouvez simplement un moyen d'être compatible avec celui-ci.

Ce n'est pas que vous puissiez vraiment surveiller le fonctionnement direct par l'utilisateur du bouton de retour intégré dans l'application via JS, ou même du bouton de retour physique d'Android, mais que vous pouvez rapidement comprendre vos besoins en modifiant votre pensée. J'espère que cette fonctionnalité pourra vous aider.

Recommandations associées :

Comment utiliser la console Chrome pour l'édition de modèles 3D (code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!