移動端監聽安卓手機返回鍵

【場景】

相信你們用安卓手機使用APP的過程當中，會遇到這樣的一個場景：按下手機的返回鍵時，會彈出一個詢問框："是否退出該頁面/APP?",而後點擊了確認鍵才真正退出APP。PC端目前能夠經過頁面的轉場實現。那這樣的效果在H5/微信瀏覽器/移動端瀏覽器，可否實現呢？

ps:如今好像不多看到彈出框了，而是彈出一個toast,而後須要在有效時間內再次點擊纔算退出。這個功能其實應該也能夠實現。

【主要需求】

1.安卓手機用戶按下返回鍵不後退網頁。彈出詢問框

2.當用戶點擊「肯定」按鈕，纔算後退

【思路】

以上的需求，按個人理解就是一句話：「監聽安卓手機返回鍵」，經過百度/google，雖然發現此功能仍沒有很好的解決方案，可是看到了兩個與此相關的線索: history pushSate/replaceSate 和 onpopstate 。 你們也能夠看看張鑫旭大神的文章：傳送門。

這兩個API的做用簡單來講就是前者能夠在瀏覽器地址欄上添加/替換一條記錄，當瀏覽器發生後退動做時，觸發後者api.

(function(){
                if(window.location.hash==""){
                history.pushState(null,null,"#1")//一訪問頁面即添加一條記錄b.html -> b.html#1
            }
            window.onpopstate = function(event) {//當用戶按下返回鍵，b.html#1 -> b.html，並觸發該事件
                if(confirm("肯定要退出嗎")){
                    history.back()   //執行真正的退出
                }else{
                  history.pushState(null,null,"#1") //用戶取消，恢復   b.html -> b.html#1
                }
           };
        }    
        )();

【改進】

一切看上去很美好，看似把功能實現了，可是，細心的用戶就會發現，當按下返回鍵，彈出詢問框時，咱們既不按確認，也不按取消，直接再次按下返回鍵，頁面仍然跳轉。所以咱們須要改進代碼。

(function(){
            if(window.location.hash==""){
                history.pushState(null,null,"#1")//一訪問頁面即添加一條記錄b.html -> b.html#1
            }
            
            window.onpopstate = function(event) {//當用戶按下返回鍵，b.html#1 -> b.html，並觸發該事件
                history.pushState(null,null,"#1")
                if(confirm("肯定要退出嗎")){
                    history.go(-2)   //執行真正的退出
                }else{
                                 //用戶取消，恢復   b.html -> b.html#1
                }
           };
        }    
        )();

如上，咱們每次的後退，都假定用戶都按了取消鍵，這樣問題就解決了。

測試後沒問題。但這仍然不是完美的方案，例如在微信瀏覽器，confirm的次數一旦超過三次，就要強制退出，沒法取消，或者一般咱們開發時都用到第三方的UI庫的彈框而不用原生的彈框.....因此下面給出了用mui的框架實現以上功能。

if (window.location.hash == "") {
        history.pushState("change", '', "#pageone");
        state = "change"
    } 

    window.onpopstate = function (e) {
      

            if (state == "confirm") {
                history.pushState("change", '', "#pageone");
                state = "change";
                mui.closePopup();
                return;
            }
            history.pushState("confirm", '', "#pageone");
            state = "confirm";
            mui.confirm("是否退出編輯？", "", ["否", "是"], function (e) {
                if (e.index == 0) {
                    history.replaceState("change", '', "#pageone");
                    state = "change";
                 
                }
                else {
                    history.go(-2)
                }

            }, "div");
       
         }

【總結】

因爲此api的兼容性極其低，所以不建議你們普遍使用，學習交流仍是能夠的哈哈，針對監聽返回鍵，你們有更好的解決方案，也能夠分享一下。