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。