1. 前言

混合開發中，如果當前操作的頁面是H5寫的。那麼這個時候點選Android手機返回鍵，預設是返回到上一個頁面，跟瀏覽器的回退功能是一樣的，都是返回到歷史記錄中的前一個記錄。看著好像沒啥問題，但是當H5頁面當前有一個彈窗，按照正常的互動，這會兒點選手機返回鍵，應該是關閉彈窗的，但是實際上卻不是這樣子，不僅僅關閉了彈窗，而且返回到了上一個頁面。那我們該如何處理這種情況呢？

2. 解決方案

不是很複雜，就是讓Android原生重寫方法onKeyDown()，並且H5頁面增加一個JS方法phoneBackButtonListener()。當點選了手機返回鍵，onKeyDown()就會被呼叫，同時也讓Android原生主動呼叫H5頁面的phoneBackButtonListener()。具體程式碼如下：

Android：

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (mWebView != null) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            mWebView.evaluateJavascript("javascript:phoneBackButtonListener()", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    // value的值為"true"時，H5頁面遮蔽手機返回鍵
                    // value的值為"false"或"null"時，H5頁面不遮蔽手機返回鍵
                    // phoneBackButtonListener()未定義或沒有返回任何資料，則value的值為"null"
                    if ("false".equals(value) || "null".equals(value)) {
                        // 執行原生的處理邏輯
                    }
                }
            });
            return true;
        }
    }
    return super.onKeyDown(keyCode, event);
}
 

H5：

// 監聽手機的返回鍵，如果H5頁面要遮蔽，則返回true；如果不遮蔽，則返回false
function phoneBackButtonListener() {
    // 執行H5的處理邏輯
    return true;
}