Heim  >  Artikel  >  Web-Frontend  >  Viele Menschen kennen die Ereignismethoden zur Überwachung der Schaltflächen „Zurück“, „Zurück“ und „Vorherige Seite“ von mobilen Apps wie WeChat und Alipay sowie von Browsern nicht.

Viele Menschen kennen die Ereignismethoden zur Überwachung der Schaltflächen „Zurück“, „Zurück“ und „Vorherige Seite“ von mobilen Apps wie WeChat und Alipay sowie von Browsern nicht.

黄舟
黄舟Original
2017-02-09 15:56:244342Durchsuche

In tatsächlichen Anwendungen müssen wir in mobilen Apps und Browsern häufig auf die Schaltflächen „Zurück“, „Zurück“, „Vorherige Seite“ und andere Schaltflächen klicken, um die Seite zu schließen, auf die angegebene Seite umzustellen oder andere Vorgänge auszuführen

Anforderung, So überwachen Sie das Ereignis im Code, wenn auf die Zurück-Schaltfläche von WeChat, Alipay, Baidu Nuomi, Baidu Wallet und anderen Apps oder auf die vorherige Seite oder die Zurück-Schaltfläche des Browsers geklickt wird.

Ich glaube, dass viele Freunde wie ich schon lange auf Baidu und Sogou gesucht haben, ohne eine Lösung zu finden. Lassen Sie mich Ihnen erklären, wie Sie Folgendes überwachen:

Zuerst müssen wir den Verlauf des Browsers verstehen. Wie wir alle wissen, können wir den JavaScript-Fensterverlauf auf der Seite verwenden, um zur vorherigen Seite zurückzukehren. Aus Sicherheitsgründen ist es JavaScript jedoch nicht gestattet, die vorhandenen URL-Links im

Verlauf zu ändern Sie können die Methode pushState verwenden, um URL-Links zum Verlauf hinzuzufügen und eine Popstate-Ereignisüberwachung bereitzustellen, um die URL aus dem Verlaufsstapel anzuzeigen. Da eine Überwachung des Popstate-Ereignisses

bereitgestellt wird, können wir es überwachen.

Zurück, Zurück, Schaltfläche zur vorherigen Seite klicken, Überwachungsimplementierungscode:

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

Obwohl wir auf das Back-Ereignis hören, kehrt die Seite dennoch zur vorherigen Seite zurück, daher müssen wir es verwenden pushState zum Erhöhen Eine URL dieser Seite stellt diese Seite dar. Jeder weiß sehr gut, dass es sich um #

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

handelt. Wenn Sie auf die Vorgänge „Zurück“, „Rückwärts“ und „Vorherige Seite“ klicken, überwachen und implementieren Sie Ihre eigenen Vorgänge im Überwachungscode.

Das Folgende ist der vollständige Code:

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

Hinweis: Einige Codes können online gefunden werden!

Sammlung von Folgefragen:

1. Das Popstate-Ereignis wird beim Betreten der Seite in WeChat ausgelöst.

Lösung: Definieren Sie die boolesche Variable bool=false. Nachdem die Seite geladen wurde, verwenden Sie die setTimeout-Methode, um ein Timeout von 1,5 Sekunden festzulegen, und legen Sie bool=true in der Timeout-Ausführungsmethode fest.

Bool-Beurteilung zur Popstate-Überwachung hinzufügen. Wenn bool=true, wird der Inhalt ausgeführt. Der spezifische Code lautet wie folgt:

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

Das Obige ist der Inhalt der Ereignismethoden zur Überwachung der Schaltflächen „Zurück“, „Zurück“ und „Vorherige Seite“ von mobilen Apps wie WeChat und Alipay sowie von Browsern, die viele Menschen verwenden Ich weiß es nicht. Weitere verwandte Inhalte Bitte beachten Sie die chinesische PHP-Website (www.php.cn)!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn