One of the methods of H5 page and native interaction, addJavascriptInterface

The second method of H5 page and native interaction, JsBridge

written in front

The interaction between js and java is nothing more than these two methods:
the first is the webview.addJavascriptInterface provided by the system,
and the second is WebViewClient.shouldOverrideUrlLoading.

addJavascriptInterface has great security risks (getting high authority through js, stealing user information, running virus code, etc.), especially before 4.2, 4.2 and above (API >= 17) added the @JavascriptInterface annotation to improve security Level, methods without annotations, js cannot be called, and a callback method webview.evaluateJavascript(s, valuecallback) was added in version 4.4, but there is still a safer way of interaction;

That is to intercept the url in the WebViewClient.shouldOverrideUrlLoading method, and dynamically implant the communication data into it . A master hi on
github, the world's largest same-sex dating website, wrote a set of js and native security interaction framework JsBridge . Let me talk about the interactive implementation method using addJavascriptInterface

How to use addJavascriptInterface

Generally, we will create a NativeJsBridge class separately to manage the code that interacts with js.
Call addJavascriptInterface to make it effective

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

android is an alias when js calls native, not fixed.
1. Java calls js
js to create the called method

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

Java calls this method

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

2. js calls java
java to create the called method

    @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 calls java method with parameters

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

3. Version 4.4 or above, calling js method with return value
js defines the called method and returns the processing result

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

Java calls a js method with a return value

    @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();
                    }
                });
            }
        });
    }