In den tatsächlichen Anwendungen müssen wir häufig die Notwendigkeit implementieren, auf die Rückgabe-, Zurück-, vorherige Seite und andere Schaltflächen in mobilen Apps und Browsern zu klicken, um die Seite zu schließen, auf die angegebene Seite anzupassen oder andere Vorgänge auszuführen. So überwachen Sie Ereignisse beim Klicken auf die Rückgabeschaltfläche von Apps wie WeChat, Alipay, Baidu Nuomi, Baidu Wallet usw. oder der vorherigen Seite oder der vorherigen Button des Browsers.
Ich glaube, dass viele Freunde wie ich sind, die lange Zeit in Baidu und Sogou gesucht haben, aber keine Methode gefunden haben.
So überwachen Sie:
Zunächst müssen wir die Geschichte des Browsers verstehen.
Wie Sie wissen, können wir den JavaScript -Fensterverlauf auf der Seite und zurück zur vorherigen Seite verwenden. Aus Sicherheitsgründen erlaubt JavaScript jedoch nicht, den vorhandenen URL -Link im Verlauf zu ändern. Sie können jedoch die PushState -Methode verwenden, um URL -Links zum Verlauf hinzuzufügen und die Popstate -Ereignisüberwachung zur Verfügung zu stellen, um die URL aus dem Verlaufsstapel auszutragen. Da die Popstate -Ereignisüberwachung bereitgestellt wird, können wir sie überwachen.
Klicken Sie auf die Schaltfläche, um den Implementierungscode für die Schaltfläche Rückgabe, zurück und vorherige Seite anzuhören:
window.adDeVentListener ("popstate", function (e) {alert ("Ich habe das Ereignis zur Rückgabe der Browser -Return -Taste gehört"); // Implementieren Sie Ihre eigene Funktion nach Ihren eigenen Bedürfnissen}, false);Obwohl wir uns das Back -Ereignis angehört haben, kehrt die Seite weiterhin zur vorherigen Seite zurück. Daher müssen wir Pushstate verwenden, um eine URL dieser Seite hinzuzufügen, um diese Seite darzustellen. Jeder weiß sehr gut, dass es # ist
Funktion PushHistory () {var state = {title: "title", url: "#"}; window.history.pusstate (Zustand, "Titel", "#"); }Beim Eingeben dieser Seite drücken wir eine lokale Verbindung zu diesem Geschichte. Wenn Sie auf die Vorgänge von Rückkehr, Rück- und vorherigen Seite klicken, hören Sie Ihre eigenen Vorgänge im Hörcode an und implementieren Sie Ihre eigenen Vorgänge.
Hier ist der vollständige Code:
$(function(){ pushHistory(); window.addEventListener("popstate", function(e) { alert("I heard the browser's return button event");//Implement your own functions according to your needs}, false); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#");Der obige Inhalt ist nur der Kerncode, den der Editor für alle aufgeführt hat. Sie können den Code entsprechend Ihren Anforderungen hinzufügen, ändern und löschen. Wenn Sie Fragen während des Verweisens auf diesen Code finden, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten!