混合开发中，H5页面如何监听Android手机返回键

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;
}

完整的demo可以查看 AndroidWebView。