H5页面与原生交互的方法之 二、JsBridge

写在前面

js和java交互无非这两种方法：
第一种就是系统提供的webview.addJavascriptInterface，
第二种就是WebViewClient.shouldOverrideUrlLoading。

addJavascriptInterface有很大的安全隐患（通过js获取高权限，盗取用户信息、运行病毒代码等等），特别是4.2之前，4.2及以上版本（API >= 17）新增了@JavascriptInterface注解来提高安全等级，没有注解的方法，js无法调用，并在4.4版本增加了带回调的方法webview.evaluateJavascript(s,valuecallback)，但仍有更安全的交互方式；

那就是在WebViewClient.shouldOverrideUrlLoading方法中截取到url，动态植入通讯数据
全球最大同性交友网站 githup上的一名大神hi大头鬼hi写好了一套js与原生安全交互的框架JsBridge。
先讲讲使用addJavascriptInterface交互实现方法

addJavascriptInterface的使用方法

一般我们会单独创建一个NativeJsBridge类来管理与js交互的代码。
调用addJavascriptInterface使其生效

NativeJsBridge nativeJsBridge = new NativeJsBridge(webView, this);
webView.addJavascriptInterface(nativeJsBridge, "android");

android是js调用原生时的别名，非固定写法。
1、java调用js
js创建被调用的方法

function setICCID(iccid){
        document.getElementById("ICCID").innerHTML = iccid;
}

java调用该方法

webView.loadUrl("javascript:setICCID('" + No:007 + "')")

2、js调用java
java创建被调用的方法

    @JavascriptInterface
    public void writeCard(final String indata) {
        mActivity.runOnUiThread(new Runnable() {

            @Override
            public void run() {
                boolean result = writeCard(indata,imei);
                //把写卡结果返回给js
                String writeResult = "javascript:showWriteResult('" + result + "')";
                mWebView.loadUrl(writeResult);
            }
        });
    }

js调用java有参方法

function writeCard(){
    var x1 = document.getElementById("writeData").innerText;
    //js调用Java函数并传入参数
    javascript:android.writeCard(x1);
}
function showWriteResult(result){
    document.getElementById("writeResult").innerHTML = result;
}

3、4.4版本以上，调用带返回值js方法
js定义被调用方法，并返回处理结果

function sum2Java(number1, number2) {
    return number1 + number2;
}

java调用带返回值的js方法

    @TargetApi(Build.VERSION_CODES.KITKAT)
    @JavascriptInterface
    public void Android2JsHaveParmHaveResult2() {
        mActivity.runOnUiThread(new Runnable() {

            @Override
            public void run() {

                mWebView.evaluateJavascript("sum2Java(3,4)", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String Str) {
                        Toast.makeText(mActivity, "我是android调用js方法(4.4后)，入参是3和4，js返回结果是" + Str, Toast.LENGTH_LONG).show();
                    }
                });
            }
        });
    }