前情：
Android控制元件WebView的自帶的JavascriptInterface的介面，可以簡單實現Java與js的互動，但是侷限性很大。所以就出現了第三方庫JSBridge。JSBridge實現了Java與javascript之間資料互通，Java呼叫js程式碼，js呼叫Java程式碼。

整合JSBridge庫
可以檢視該庫的GitHub簡述
整合方法兩種：

1. 在bulid.gradle中新增如下程式碼

repositories {  
        maven {url "https://jitpack.io"}  
    }  
    dependencies {  
        compile 'com.github.lzyzsd:jsbridge:1.0.4'
 

    }

JSBridge使用

1. javascript呼叫java，實現資料互通

 **js程式碼** 

 window.WebViewJavascriptBridge.callHandler(
                'Javajs'
                , {'param': '中文測試'}
                , function(responseData) {
                    document.getElementById("show").innerHTML = "得到來自Java回傳的資料, data = "
 
 + responseData
                }
            );

 **Java程式碼**

 /**
         * Html點選事件利用JS function方法調Android端並相互傳值。
         * bridgeWebView呼叫registerHandler實現Java與js互傳資料
         * "Javajs"是Java與js互動的handlerName，必須保持一致
         */
        bridgeWebView.registerHandler("Javajs", new BridgeHandler() {
            @Override
 

            public void handler(String data, CallBackFunction function) {
                //data是JavaScript返回的資料
                Log.i(TAG, "得到JS傳過來的資料 " + data);
                //java返回給js的資料
                function.onCallBack("Java資料");
            }
        });

2.java呼叫javascript程式碼，實現資料互通

 **Java程式碼**

 /**
                 * Android點選事件呼叫JS方法並相互傳值。
                 * Java 調JS的functionJs方法並得到返回值
                 */

                bridgeWebView.callHandler("functionInJs", "來自Java資料", new CallBackFunction() {
                    @Override
                    public void onCallBack(String data) {
                        Log.i(TAG,  data);
                    }

**javascript程式碼**

 bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                if (responseCallback) {
                    var responseData = "來自javascript資料";
                    responseCallback(responseData);
                }
            });

3.Java設定預設方式，接收js資料，不回傳資料給js

**java程式碼**

       /**
         * You can set a default handler in Java, so that js can send message to Java without assigned handlerName
         * DefaultHandler預設的方式，設定預設方式的話，js傳送資料給Java不需要設定handlerName
         * 預設方式有兩種
         * 1。DefaultHandler預設的方式
         * 2。自定義實現
         */
        //DefaultHandler預設的方式
        bridgeWebView.setDefaultHandler(new DefaultHandler());
        //自定義實現
        bridgeWebView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.i(TAG, "得到JS傳過來的資料 " + data);
            }
        });

**javascript程式碼**

    //send message to native
            var data = {id: 1, content: "這是一個圖片 <img src=\"a.png\"/> test\r\nhahaha"};
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "發訊息給java, data = " + responseData
                }
            );

4.javascript設定預設方式，接收Java資料，不回傳資料給java
java程式碼

**Java 程式碼**

bridgeWebView.send("無返回值");

**javascript程式碼**

  connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '測試中文!'
                };

                if (responseCallback) {
                    console.log('JS responding with', data);
                    responseCallback(data);
                }
            });