De nombreuses personnes ne connaissent pas les méthodes événementielles permettant de surveiller les boutons de retour, de retour et de page précédente des applications mobiles et des navigateurs tels que WeChat et Alipay.

Dans les applications réelles, nous devons souvent cliquer sur les boutons retour, retour, page précédente et autres boutons dans les applications mobiles et les navigateurs pour fermer la page, ajuster la page spécifiée ou effectuer d'autres opérations

Exigence, comment surveiller l'événement dans le code lorsque l'on clique sur le bouton retour de WeChat, Alipay, Baidu Nuomi, Baidu Wallet et d'autres applications ou sur la page précédente ou le bouton retour du navigateur.

Je crois que beaucoup d'amis, comme moi, recherchent depuis longtemps sur Baidu et Sogou sans trouver de solution. Laissez-moi vous expliquer comment surveiller :

Tout d'abord, nous devons comprendre l'historique du navigateur. Comme nous le savons tous, nous pouvons utiliser l'historique des fenêtres JavaScript sur la page pour revenir à la page précédente. Cependant, pour des raisons de sécurité, JavaScript n'est pas autorisé à modifier les liens URL existants dans l'

historique, mais. vous pouvez utiliser la méthode pushState pour ajouter des liens URL à l'historique et fournir une surveillance des événements popstate pour afficher l'URL de la pile d'historique. Puisque la surveillance des événements popstate

est fournie, nous pouvons le surveiller.

Retour, retour, bouton de la page précédente, cliquez sur le code d'implémentation de la surveillance :

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

Bien que nous écoutions l'événement de retour, la page reviendra toujours à la page précédente, nous devons donc utiliser pushState pour augmenter Une URL de cette page représente cette page Tout le monde sait très bien qu'il s'agit de #

function pushHistory() {  
        var state = {  
            title: "title",  
            url: "#"  
        };  
        window.history.pushState(state, "title", "#");  
    }

En entrant dans la page, nous pousserons une connexion locale à l'historique. Lorsque vous cliquez sur les opérations de retour, de retour en arrière et de page précédente, vous surveillerez et implémenterez vos propres opérations dans le code de surveillance.

Voici le code complet :

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

Remarque : Certains codes peuvent être trouvés en ligne !

Collection de questions de suivi :

1. L'événement popstate est déclenché lors de l'entrée dans la page dans WeChat.

Solution : Définissez la variable booléenne bool=false. Une fois la page chargée, utilisez la méthode setTimeout pour définir un délai d'attente de 1,5 s et définissez bool=true dans la méthode d'exécution du délai d'attente.

Ajoutez un jugement booléen dans la surveillance popstate. Lorsque bool=true, exécutez le contenu. Le code spécifique est le suivant :

$(function(){  
            pushHistory();  
            var bool=false;  
            setTimeout(function(){  
                  bool=true;  
            },1500);  
            window.addEventListener("popstate", function(e) {  
              if(bool)  
                {  
                        alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能  
                }  
                pushHistory();  
                  
        }, false);  
        });

Ce qui précède est le contenu des méthodes d'événement permettant de surveiller les boutons de retour, de retour et de page précédente des applications mobiles telles que WeChat et Alipay et des navigateurs que de nombreuses personnes utilisent. Je ne sais pas. Plus de contenu connexe Veuillez faire attention au site Web chinois PHP (m.sbmmt.com) !