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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Fantasy_Lin_/article/details/81057541

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

 

展开阅读全文

没有更多推荐了,返回首页