The WebView Javascript Bridge is the bridge between mobile UIView and Html. In the author's words, it is the bridge between java and js.

Instead of WebView's own Javascript Interface interface, it makes our development more flexible and secure.

This blog implements all the ways of interaction between Android and (HTML+JS) in JSBridge library. It has detailed code and clear comments. I hope it will be helpful to you.

The effect is as follows:

　　　　　　

Preparations before development: (Choose one of two ways)

Mode 1: Just import JSBridge's library package directly, and Android Studio's library package can be seen in the blog: How does Android Studio import library project open source libraries

library package download

 

Mode 2: Introduce the library and add the following code in bulid.gradle

repositories {
    maven { url "https://jitpack.io" }
}

dependencies {
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}

1: DefaultHandler default mode (1: DefaultHandler default mode); 2: custom class implementation)

//Show the first
bridgeWebView.setDefaultHandler(new DefaultHandler());

//Data is the data returned by JavaScript
private void setHandler(){

        bridgeWebView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Toast.makeText(MainActivity.this,"DefaultHandler Acquiescence:"+data,Toast.LENGTH_LONG).show();
            }
        });
   }

JS

connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'json': 'JS Return arbitrary data!'
                };
                console.log('JS responding with', data);/*Print information*/
                 document.getElementById("init").innerHTML = "data = " + message;
                responseCallback(data);
            });

2: Html click event uses JS function method to adjust Android end and pass values to each other.

function testClick() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;

            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'Data': 'json Data transmission Android end'}  //This type is arbitrary
                , function(responseData) {
                    document.getElementById("show").innerHTML = "obtain Java Pass-on data data = " + responseData
                }
            );
        }

Android.Java

 //Register submitFromWeb method
        bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.i(TAG,"obtain JS Pass-on data data ="+data);
                show(data);
                function.onCallBack("Transfer data to JS");
            }
        });

3: Android click events call JS methods and pass values to each other.

 @Override
    public void onClick(View v) {
        //Java calls JS functionJs method and gets the return value
        bridgeWebView.callHandler("functionJs", "Android", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                // TODO Auto-generated method stub
               show(data);
            }

        });
    }

JS.js

 bridge.registerHandler("functionJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("Android end: = " + data);
                var responseData = "Javascript data";
                responseCallback(responseData);//Callback to Android
            });

send mode (including return value and no return value)

No return value:

bridgeWebView.send("No return value");

function testClick() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            //Display the data from the Android side on the web page and pass other data to the Android side for initialization and click operation.
            var data = {id: 1, content: "I am content."};
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "data = " + responseData
                }
            );
       }

Other ways, such as documents;

 

The code is a little bit too much, so you can download it directly instead of showing it one by one.

 

Source Click Download