Dans les applications réelles, nous devons souvent implémenter la nécessité de cliquer sur le retour, le dos, la page précédente et d'autres boutons dans les applications et les navigateurs mobiles pour fermer la page, s'adapter à la page spécifiée ou effectuer d'autres opérations. Alors, comment surveiller les événements lorsque vous cliquez sur le bouton de retour des applications telles que WeChat, Alipay, Baidu Nuomi, Baidu Wallet, etc. ou la page précédente ou le bouton arrière du navigateur.
Je crois que de nombreux amis sont comme moi, qui ont recherché à Baidu et Sogou depuis longtemps mais n'ont pas trouvé de méthode.
Voici comment surveiller:
Tout d'abord, nous devons comprendre l'histoire du navigateur.
Comme vous le savez, nous pouvons utiliser l'historique des fenêtres JavaScript sur la page et revenir à la page précédente. Cependant, pour des raisons de sécurité, JavaScript n'autorise pas la modification du lien URL existant dans l'historique, mais vous pouvez utiliser la méthode PushState pour ajouter des liens d'URL à l'historique et fournir une surveillance des événements PopState pour faire apparaître l'URL à partir de la pile d'historique. Étant donné que la surveillance des événements de PopState est fournie, nous pouvons le surveiller.
Cliquez sur le bouton pour écouter le code d'implémentation pour le bouton Retour, dos et page précédente:
window.addeventListener ("popState", fonction (e) {alert ("J'ai entendu l'événement du bouton de retour du navigateur"); // implémenter votre propre fonction en fonction de vos propres besoins}, false);Bien que nous ayons écouté l'événement arrière, la page reviendra toujours à la page précédente, nous devons donc utiliser PushState pour ajouter une URL de cette page pour représenter cette page. Tout le monde sait très bien que c'est #
fonction pushhistory () {var state = {title: "title", url: "#"}; window.history.pushstate (état, "titre", "#"); }Lors de la saisie de cette page, nous appuyons sur une connexion locale à cette histoire. Lorsque vous cliquez sur les opérations de retour, de dos et de page précédente, écoutez et implémentez vos propres opérations dans le code d'écoute.
Voici le code complet:
$ (function () {pushhistory (); window.addeventListener ("popState", fonction (e) {alert ("J'ai entendu l'événement de retour du navigateur"); // implémenter vos propres fonctions en fonction de vos besoins}, false); fonction Pushhistory () {var State = {Title: "Title", Url: "#"}; Windows.History.history.pushState, "Titre", ","}; Windows.History.history.pushState (Titre ",", "#"; "#");}});Le contenu ci-dessus n'est que le code de base répertorié par l'éditeur pour tout le monde. Vous pouvez ajouter, modifier et supprimer le code en fonction de vos besoins. Si vous trouvez des questions pendant le processus de référence à ce code, laissez-moi un message et l'éditeur répondra à tout le monde à temps!