微信支付寶頁面點擊返回後關閉

需求背景

在支付完成頁面後，如果用戶點擊返回按鈕，會返回到繼續支付的頁面。既然已經完成支付了，那麼在用戶點擊返回按鈕之後，就可以關閉頁面了，這纔是合理的做法。所以我們的目的就是，監聽用戶的頁面返回事件，然後關閉頁面。

監聽返回事件

js裏面有一個popstate事件，當頁面返回時會觸發這樣一個事件。微信支付寶裏，直接的監聽該事件，在返回按鈕點擊時，並不能真正的觸發popstate事件。需要通過pushstate先壓入一個歷史記錄(通常是本頁)，例如：

  $(function(){
  pushHistory();
});

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

這樣在微信支付寶頁面裏，點擊返回按鈕就會觸發popstate事件了，我們就可以進行相應的處理，例如：

window.addEventListener('popstate',function(){
            alert('返回按鈕點擊');
        });

由於有的瀏覽器，在頁面剛進入的時候就會觸發popstate事件，因此需要做一下兼容處理：

function listenPopstate(){
        var initReady = false;
        setTimeout(function(){
            initReady = true;
        },500); // 延遲500毫秒才真正處理popstate事件

        window.addEventListener('popstate',function(){
            if(initReady){
                closeCurrentWindow();
            }
        });
    }

關閉頁面

微信和支付寶關閉頁面是通過自己的jssdk處理的，例如：

WeixinJSBridge.call('closeWindow');//微信
AlipayJSBridge.call('closeWebview'); //支付寶

做過混合開發的應該對js調用原生api不陌生，這裏就是通過js調用app的原生api關閉頁面。
所以我們只需要判斷瀏覽器是微信的還是支付寶的，再調用相應的關閉窗口的api就好了。

function closeCurrentWindow(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            WeixinJSBridge.call('closeWindow');//微信
        } else if(ua.indexOf("alipay")!=-1){
            AlipayJSBridge.call('closeWebview'); //支付寶
        }else { // 普通瀏覽器
            window.opener=null; // 因爲安全策略，不允許js關閉非js打開的窗口，這裏模擬js再打開一個，然後將其關閉
            window.open('','_self');
            window.close();
        }
    }

完整代碼

$(function(){
  pushHistory();
  listenPopstate();
})

/**
* 監聽popstate事件
*/
    function listenPopstate(){
        var initReady = false;
        setTimeout(function(){
            initReady = true;
        },500);

        window.addEventListener('popstate',function(){
            if(initReady){
                closeCurrentWindow();
            }
        });
    }

/**
* 塞一個當前頁的history實體
*/
    function pushHistory(){
        var state = {
            title: "",
            url: "#"
        };
        window.history.pushState(state, "", "#");
    }

/**
* 關閉當前窗口
*/
    function closeCurrentWindow(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.indexOf("micromessenger") !== -1) {
            WeixinJSBridge.call('closeWindow');//微信
        } else if(ua.indexOf("alipay")!=-1){
            AlipayJSBridge.call('closeWebview'); //支付寶
        }else { // 普通瀏覽器
            window.opener=null; // 因爲安全策略，不允許js關閉非js打開的窗口，這裏模擬js再打開一個，然後將其關閉
            window.open('','_self');
            window.close();
        }
    }

後記

現在支付寶推出了jssdk代替jsapi，因此支付寶關閉瀏覽器可以用如下方式：
1-引入支付寶jssdk

<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>

2-關閉瀏覽器

function exitCurrentWindow(){
    var ua = navigator.userAgent.toLowerCase();

    if(ua.indexOf("micromessenger") !== -1) {
        weixinJSBridgeReady(function () {
            WeixinJSBridge.call('closeWindow');//微信
        });
    } else if(ua.indexOf("alipay") !== -1){
        ap.popWindow(); //支付寶使用了alipay jssdk（支付寶推薦替換jsapi）,需要額外引入js文件。
    } else { // 普通瀏覽器
            window.opener=null; // 因爲安全策略，不允許js關閉非js打開的窗口，這裏模擬js再打開一個，然後將其關閉
            window.open('','_self');
            window.close();
        }
}

參考

1-支付寶H5開發文檔