在實(shí)際的應(yīng)用中，我們常常需要實(shí)現(xiàn)在移動(dòng)app和瀏覽器中點(diǎn)擊返回、后退、上一頁(yè)等按鈕實(shí)現(xiàn)自己的關(guān)閉頁(yè)面、調(diào)整到指定頁(yè)面或執(zhí)行一些其它操作的
需求，那在代碼中怎樣監(jiān)聽當(dāng)點(diǎn)擊微信、支付寶、百度糯米、百度錢包等app的返回按鈕或者瀏覽器的上一頁(yè)或后退按鈕的事件呢。

我相信很多朋友像我一樣，在百度、搜狗里面搜索很久都沒找到方法。下面就來告訴大家怎樣監(jiān)聽的方法：

首先我們要了解瀏覽器的history。大家知道在頁(yè)面中我們可以使用JavaScript window history，后退到前面頁(yè)面，但是由于安全原因javascript不允許修改
history里已有的url鏈接，但可以使用pushState方法往history里增加url鏈接，并且提供popstate事件監(jiān)測(cè)從history棧里彈出url。既然有提供popstate事件
監(jiān)測(cè)，那么我們就可以進(jìn)行監(jiān)聽。

返回、后退、上一頁(yè)按鈕點(diǎn)擊監(jiān)聽實(shí)現(xiàn)代碼：

window.addEventListener("popstate", function(e) {  
        alert("我監(jiān)聽到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能  
    }, false);  

雖然我們監(jiān)聽到了后退事件，但是頁(yè)面還是會(huì)返回上一個(gè)頁(yè)面，所以我們需要使用pushState增加一個(gè)本頁(yè)的url,代表本頁(yè)，大家都非常清楚是#

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

當(dāng)進(jìn)入該頁(yè)面，我們就給這個(gè)history壓入一個(gè)本地的連接。當(dāng)點(diǎn)擊返回、后退及上一頁(yè)的操作時(shí)，就進(jìn)行監(jiān)聽，在監(jiān)聽代碼中實(shí)現(xiàn)自己操作。

下面是完整的代碼：

$(function(){  
    pushHistory();  
    window.addEventListener("popstate", function(e) {  
        alert("我監(jiān)聽到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能  
}, false);  
    function pushHistory() {  
        var state = {  
            title: "title",  
            url: "#"  
        };  
        window.history.pushState(state, "title", "#");  
    }  
      
});  

1.在微信中進(jìn)入頁(yè)面就觸發(fā)了popstate事件。

解決方法：定義boolean 變量bool=false。在頁(yè)面加載后，采用setTimeout方法設(shè)置1.5s的超時(shí)，在超時(shí)執(zhí)行方法中設(shè)置bool=true。
在popstate監(jiān)聽當(dāng)中增加對(duì)bool的判斷，當(dāng)bool=true時(shí)，執(zhí)行內(nèi)容。具體代碼如下：

$(function(){  
            pushHistory();  
            var bool=false;  
            setTimeout(function(){  
                  bool=true;  
            },1500);  
            window.addEventListener("popstate", function(e) {  
              if(bool)  
                {  
                        alert("我監(jiān)聽到了瀏覽器的返回按鈕事件啦");//根據(jù)自己的需求實(shí)現(xiàn)自己的功能  
                }  
                pushHistory();  
                  
        }, false);  
        });  

http://blog.csdn.net/mr_smile2014/article/details/52064650
http://frontenddev.org/article/html-5-pushstate-popstate-operating-history-no-refresh-to-change-the-current-url.html