http://www.cnblogs.com/wingyip/p/5426477.html

基础知识

JS和Native之间的通信方式

• 在Android开发中，能实现Javascript与Native代码通信的，有4种途径：
  1.JavascriptInterface
  2.WebViewClient.shouldOverrideUrlLoading()
  3.WebChromeClient.onConsoleMessage()
  4.WebChromeClient.onJsPrompt()

• Native调用Javascript使用loadUrl()方法。

此处涉及到了WebViewClient和WebChromeCLient:

WebViewClient主要帮助WebView处理各种通知、请求事件的，比如：

• onPageStarted(WebView view, String url, Bitmap favicon)
• onPageFinished(WebView view, String url)
• onLoadResource(WebView view, String url)
• onReceivedError(WebView view, int errorCode, String description, String failingUrl)
• onReceivedHttpAuthRequest(WebView view,HttpAuthHandler handler, String host, String realm)
• shouldOverrideUrlLoading(WebView view, String url)//将在webview上点击的url传递过来，java代码决定是否拦截

WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等比如

• onProgressChanged(WebView view, int newProgress)
• onReceivedTitle(WebView view, String title)
• onReceivedIcon(WebView view, Bitmap icon)
• onJsAlert(WebView view, String url, String message,JsResult result)//JS需要弹出警告框
• onJsConfirm(WebView view, String url, String message,JsResult result)//JS需要弹出确认框
• onJsPrompt(WebView view, String url, String message,String defaultValue, JsPromptResult result)//JS需要弹出提示信息
• onCloseWindow(WebView window)

JsBridge的实现

JsBridge中，JAVA和JS互相调用前，都需要注册方法。

//Native中注册方法，提供给JS调用（非webview原生方法，需要自定义）
webView.registerHandler("submitFromWeb", new BridgeHandler() {

    @Override
    public void handler(String data, CallBackFunction function) {
        Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
        function.onCallBack("submitFromWeb exe, response data 中文 from Java");
    }

});

//JS中注册方法，提供给Native调用
bridge.registerHandler("functionInJs", function(data, responseCallback) {
    document.getElementById("show").innerHTML = ("data from Java: = " + data);
    var responseData = "Javascript Says Right back aka!";
    responseCallback(responseData);
});

JAVA注册方法：
自定义webview调用registerHandler(String handlerName, BridgeHandler handler)后，将handler存入一个messageHandlers的Map中，键为handlerName，也就是JS调JAVA时需要指定的调用名称，handler就是JS调用JAVA是所执行的方法。

//JAVA方面，webview进行方法注册
public void registerHandler(String handlerName, BridgeHandler handler) {
    if (handler != null) {
        messageHandlers.put(handlerName, handler);
    }
}

JS注册方法：
在将 WebViewJavascriptBridge.js 文件load到webview中后，JS中会执行connectWebViewJavascriptBridge方法，进行JS方面的调用方法注册。注册后，会将回调函数存储到messageHandlers这个对象中（可以理解为MAP，键为注册的函数名）。

//JS注册方法的形式，第一个参数是JAVA调用JS需要指定的方法名称，第二个函数参数是具体执行的方法。
bridge.registerHandler("functionInJs", function(data, responseCallback) {})

//注册实际调用的方法
function registerHandler(handlerName, handler) {
    messageHandlers[handlerName] = handler;
}

此处建立WebViewJavascriptBridge.js和html界面的连接，有两种方法：

• 在webview加载完html界面后（onPageFinished方法可以监听到），再次通过webview.loadUrl("")方法，将WebViewJavascriptBridge.js的加入到该webview中。
• 如果加载的是本地的（资源文件中的或者已经下载下来的）html界面，可以将WebViewJavascriptBridge.js添加到需要加载的界面的头部，再进行webview.loadDataWithBaseURL()或者webview.loadData()方法进行界面加载。

//WebViewJavascriptBridge.js中部分代码
...
//进行全局的参数申明，用于html界面判断是否已经进行了bridge的初始化
var WebViewJavascriptBridge = window.WebViewJavascriptBridge = {
    init: init,
    send: send,
    registerHandler: registerHandler,
    callHandler: callHandler,
    _fetchQueue: _fetchQueue,
    _handleMessageFromNative: _handleMessageFromNative
};
var doc = document;
_createQueueReadyIframe(doc);
var readyEvent = doc.createEvent('Events');
readyEvent.initEvent('WebViewJavascriptBridgeReady');//注册dom事件
readyEvent.bridge = WebViewJavascriptBridge;
doc.dispatchEvent(readyEvent);//发布事件
...

//加载的html界面中的部分代码
...
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {//如果WebViewJavascriptBridge有定义，则直接执行回调函数
        callback(WebViewJavascriptBridge)
    } else {//WebViewJavascriptBridge没有定义，那么监听相关事件，等待激活
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                callback(WebViewJavascriptBridge)
            },
            false
        );
    }
}
//直接调用JS方法，传递回调函数
connectWebViewJavascriptBridge(function(bridge) {
    bridge.init(function(message, responseCallback) {
        console.log('JS got a message', message);
        var data = {
            'Javascript Responds': '测试中文!'
        };
        console.log('JS responding with', data);
        responseCallback(data);
    });
    bridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
    });
})
...

JAVA调用JS方法

一般来讲，JAVA调用JS使用callHandler(String handlerName, String data, CallBackFunction callBack)方法，也可以使用send(String data)方法进行默认方法（需要在JS调用端进行处理）的调用。

//BridgeWebView部分代码
...
//此方法为调用JS方法最终会调用到的方法
//参数：handlerName-JS注册的方法名称；data-传递的数据；responseCallback-调用成功后的回调函数
private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
    Message m = new Message();
    if (!TextUtils.isEmpty(data)) {
        m.setData(data);
    }
    if (responseCallback != null) {
        String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
        responseCallbacks.put(callbackStr, responseCallback);
        m.setCallbackId(callbackStr);
    }
    if (!TextUtils.isEmpty(handlerName)) {
        m.setHandlerName(handlerName);
    }
    queueMessage(m);
}

private void queueMessage(Message m) {
    if (startupMessage != null) {
        startupMessage.add(m);
    } else {
        dispatchMessage(m);
    }
}

void dispatchMessage(Message m) {
    String messageJson = m.toJson();
    //escape special characters for json string
    messageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");
    messageJson = messageJson.replaceAll("(?<=[^\\\\])(\")", "\\\\\"");
    String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
    if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
        this.loadUrl(javascriptCommand);
    }
}
...

Message类的定义

//用于在JAVA和JS之间通讯的重要类
public class Message {
    private String callbackId; //回调函数的唯一确认值
    private String responseId; //responseId
    private String responseData; //responseData
    private String data; //传递的数据
    private String handlerName; //调用函数注册的名称
    //一些数据转化需要的数据标识符
    private final static String CALLBACK_ID_STR = "callbackId";
    private final static String RESPONSE_ID_STR = "responseId";
    private final static String RESPONSE_DATA_STR = "responseData";
    private final static String DATA_STR = "data";
    private final static String HANDLER_NAME_STR = "handlerName";
    
        ...set and gets...
    //将message类实例转化为json对象
    public String toJson() {
        JSONObject jsonObject= new JSONObject();
        try {
            jsonObject.put(CALLBACK_ID_STR, getCallbackId());
            jsonObject.put(DATA_STR, getData());
            jsonObject.put(HANDLER_NAME_STR, getHandlerName());
            jsonObject.put(RESPONSE_DATA_STR, getResponseData());
            jsonObject.put(RESPONSE_ID_STR, getResponseId());
            return jsonObject.toString();
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return null;
    }
    //将message类对应的json对象转化为message类实例
    public static Message toObject(String jsonStr) {
        Message m =  new Message();
        try {
            JSONObject jsonObject = new JSONObject(jsonStr);
            m.setHandlerName(jsonObject.has(HANDLER_NAME_STR) ? jsonObject.getString(HANDLER_NAME_STR):null);
            m.setCallbackId(jsonObject.has(CALLBACK_ID_STR) ? jsonObject.getString(CALLBACK_ID_STR):null);
            m.setResponseData(jsonObject.has(RESPONSE_DATA_STR) ? jsonObject.getString(RESPONSE_DATA_STR):null);
            m.setResponseId(jsonObject.has(RESPONSE_ID_STR) ? jsonObject.getString(RESPONSE_ID_STR):null);
            m.setData(jsonObject.has(DATA_STR) ? jsonObject.getString(DATA_STR):null);
            return m;
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return m;
    }
    
    public static List<Message> toArrayList(String jsonStr){
        List<Message> list = new ArrayList<Message>();
        try {
            JSONArray jsonArray = new JSONArray(jsonStr);
            for(int i = 0; i < jsonArray.length(); i++){
                Message m = new Message();
                JSONObject jsonObject = jsonArray.getJSONObject(i);
                m.setHandlerName(jsonObject.has(HANDLER_NAME_STR) ? jsonObject.getString(HANDLER_NAME_STR):null);
                m.setCallbackId(jsonObject.has(CALLBACK_ID_STR) ? jsonObject.getString(CALLBACK_ID_STR):null);
                m.setResponseData(jsonObject.has(RESPONSE_DATA_STR) ? jsonObject.getString(RESPONSE_DATA_STR):null);
                m.setResponseId(jsonObject.has(RESPONSE_ID_STR) ? jsonObject.getString(RESPONSE_ID_STR):null);
                m.setData(jsonObject.has(DATA_STR) ? jsonObject.getString(DATA_STR):null);
                list.add(m);
            }
        } catch (JSONException e) {
            e.printStackTrace();
        }
        return list;
    }
}

JS调用JAVA方法

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener