Many people don't know the event methods for monitoring the return, back, and previous page buttons of mobile apps and browsers such as WeChat and Alipay.

In actual applications, we often need to click the return, back, previous page and other buttons in mobile apps and browsers to close the page, adjust to the specified page or perform some other operations

Requirement, how to monitor the event in the code when the return button of WeChat, Alipay, Baidu Nuomi, Baidu Wallet and other apps or the previous page or back button of the browser is clicked.

I believe that many friends, like me, have searched in Baidu and Sogou for a long time without finding the method. Let me tell you how to monitor:

First of all, we need to understand the history of the browser. As we all know, we can use JavaScript window history on the page to go back to the previous page. However, due to security reasons, JavaScript is not allowed to modify the existing url links in

history, but you can use the pushState method to add url links to the history. , and provide popstate event monitoring to pop up the URL from the history stack. Since popstate event

monitoring is provided, we can monitor it.

Return, back, previous page button click monitoring implementation code:

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

Although we monitor the back event, the page will still return to the previous page, so we need to use pushState to add this The url of the page represents this page. Everyone knows very well that it is

#

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

. When entering the page, we will push a local connection to the history. When you click on the return, backward and previous page operations, you will monitor and implement your own operations in the monitoring code.

The following is the complete code:

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

Note: Some codes can be found online!

Collection of follow-up questions:

1. The popstate event is triggered when entering the page in WeChat.

Solution: Define boolean variable bool=false. After the page is loaded, use the setTimeout method to set a timeout of 1.5s, and set bool=true in the timeout execution method.

Add bool judgment in popstate monitoring. When bool=true, execute the content. The specific code is as follows:

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

The above is the content of the event methods for monitoring the return, back, and previous page buttons of mobile apps such as WeChat and Alipay and browsers that many people do not know. Please pay attention to more related content. PHP Chinese website (www.php.cn)!