WebView與Js交互-JsBridge的使用

前言

在WebView的開發中，經常需要用到本地函數與H5界面或者Js交互，傳遞數據等，但是都知道Android本身自帶的WebView與Js交互方式通過addJavascriptInterface這種橋接方式存在安全隱患問題，這個可以網上查一大堆，這裏提供一種可行的方式進行交互，方便Android與IOS同時使用–WebViewJavascriptBridge。

github地址

https://github.com/lzyzsd/JsBridge

功能

• Js調用Android（IOS）本地方法（獲取回調）；
• Android（IOS）本地調用Html函數；
• Android（IOS）本地調用Html函數並獲取回調；

使用方法

添加依賴

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

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

這裏需要注意的一個坑：不建議直接添加github依賴，1.0.4版本存在很多問題，會在使用中出現不穩定情況，例如js無法獲取Android（IOS）的回調值等。

推薦方式

直接將該庫中的library clone下來，作爲Module導入並依賴。

簡單封裝JS庫文件

爲了使Android和IOS同時使用，方便開發時Html界面調用，這裏抽出一個JS庫，統一Android和IOS的調用方式。

以下代碼都是js文件中的（NativeApp.js）

判斷手機類型

/**
 * 獲取系統類型 （根據userAgent判斷）
 * IOS 蘋果
 * ANDROID 安卓
 * UNKOWN 未知
 */
getOSType : function(){
    var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
	if(isAndroid){
		return 'ANDROID';
	}else if(isiOS){
		return 'IOS';
	}else{
		return 'UNKOWN';
	}
}

設置Android手機橋接

Android在使用該庫時需要初始化配置，這段代碼必須設置在Js中。

/**
 * android系統js橋接口設置
 * @param {Object} callback 橋接口回調函數 橋接方式固定寫法
 */
setUpAndroidBridge: function (callback) {
	if(window.WebViewJavascriptBridge) {
		return callback(WebViewJavascriptBridge);
    } else {
 	    document.addEventListener(
 		    'WebViewJavascriptBridgeReady',
 		    function() {
 			    return callback(WebViewJavascriptBridge);
 	        },
 			false
 		);
 	}
}

設置IOS手機橋接

IOS在使用時配置該庫的代碼如下：

/**
 * IOS系統js橋接口設置
 * @param {Object} callback 橋接口回調函數 橋接方式固定寫法
 */
setUpIOSBridge : function (callback) {
	if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
	if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
	window.WVJBCallbacks = [callback];
	var WVJBIframe = document.createElement('iframe');
	WVJBIframe.style.display = 'none';
	WVJBIframe.src = 'https://__bridge_loaded__';
	document.documentElement.appendChild(WVJBIframe);
	setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

設置Android和IOS統一橋接口

爲了方便Html端的調用，在JS文件中，將Android和IOS的橋接口統一設置。

/**
 * Android和IOS 統一橋接口
 *
 * data 請求參數封裝
 *     如  var data = {
 *            'action': 'closeWebViewPage',
 *            'data':'關閉當前webView視圖'
 *
 *         };
 *
 * callback 結果返回值回調
 *     如 var callbackFun = function(resultdata){
 *            //resultdata 爲具體返回值封裝
 *        }
 *
 *
 */
setUpBridge:function(data,resultCallback){
    var osType = this.getOSType();//獲取系統類型
    //按系統類型 分別執行原生交互
    if(osType=='IOS') {
		//蘋果手機交互方式 消息體爲字面量對象(json格式)： action 代表執行的動作 data 代表傳遞的數據
		this.setUpIOSBridge(function(bridge) {
			bridge.callHandler('IOSNativeApp',data, function(response) {
				if(typeof resultCallback == 'function') {
					resultCallback(response);
				}
			});
		});
    } else if(osType == 'ANDROID') {
        //安卓手機交互方式
        this.setUpAndroidBridge(function(bridge) {
			bridge.callHandler('AndroidNativeApp', data, function(response) {
				if(typeof resultCallback == 'function') {
					resultCallback(response);
				}
			});
		});
	}else {
		//其他類型
	}
}

JS調用函數

在Js中設置兩個函數，分別實現不同的功能（一個是關閉本地界面，一個是回傳用戶信息），爲了方便在Html中調用，這裏在JS中設置了兩個方法，可以根據自己的實際情況封裝，這裏只是爲了演示。

關閉（返回）界面：

/**
 * 關閉當前WebView視圖頁面，並返回上一級原生界面
 */
closeWebViewPage : function() {
	var data = {
		'action': 'closeWebViewPage',
		'data':'關閉當前webView視圖'
	};
	this.setUpBridge(data,null);
}

獲取當前登錄用戶：

/**
 * 獲取當前用戶信息
 * resultCallback 爲一個回調處理函數，函數參數爲返回值
 * 如 
 * var resultCallback = function(resultData){
 *
 * }
 * 
 */
getCurrentUserInfo :function(resultCallback) {
       var data = {
    	    'action': 'getCurrentUserInfo',
    	    'data':'獲取用戶信息'
       };
    this.setUpBridge(data,resultCallback);
}

JS庫文件整體代碼

var NativeApp = {
	
	closeWebViewPage : function() {...}

	getCurrentUserInfo :function(resultCallback) {...}

	getOSType : function(){...}

	setUpBridge:function(data,resultCallback){...}

	setUpIOSBridge : function (callback) {...}

	setUpAndroidBridge: function (callback) {...}

}

Html頁面設置

這裏需要將定義好的Js庫引入使用，這裏設置了兩個點擊按鈕用於調用java本地方法（一個關閉界面，一個獲取用戶數據），並定義兩個用於顯示內容的標籤（一個顯示java主動調用帶的參數，一個用於顯示主動獲取的java數據）。

<!DOCTYPE html>
<!--導入-->
<script type="text/javascript" src="NativeApp.js" ></script>
<script>

	function testClick() {
		//關閉web頁面
		NativeApp.closeWebViewPage();
	}


	var resultCallBack = function(resultData){
		bridgeLog('來自Java的回傳數據： ' + resultData);
	}

	function testClick1() {
		//獲取用戶信息
		NativeApp.getCurrentUserInfo(resultCallBack);
	}

	var resultCallBack2 = function(result) {
		showDataFromNative(result);
	}

	function bridgeLog(logContent) {
		document.getElementById("log_msg").innerHTML = logContent;
	}

	function showDataFromNative(dataFromNative) {
		document.getElementById("data_from_native").innerHTML = dataFromNative;
	}

	NativeApp.setUpAndroidBridge(function(bridge) {
    	bridge.registerHandler("functionInJs", function(data, resultCallback){
        	console.log("Js收到Native的調用（需要返回值）：" + data);
        	showDataFromNative(data);
        	resultCallback("js 已接收");
    	});
	})

	NativeApp.setUpAndroidBridge(function(bridge) {
    	bridge.registerHandler("functionInJs_2", function(data, resultCallback){
        	console.log("Js收到Native的調用：" + data);
        	showDataFromNative(data);
    	});
	})


</script>
	<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>測試WebViewJsBridge</p>
		<div>
			<button onClick="testClick()">關閉視圖界面</button>
		</div>
		<br/>
		<div>
			<button onClick="testClick1()">獲取用戶信息</button>
		</div>
		<br/>
		<div id="log_msg">data</div>
		<br/>
		<div id="data_from_native">data</div>
	</body>
</html>

Html這裏調用的時候需要注意的是，我這裏是通過兩個點擊按鈕去主動觸發的JS調用本地方法，這裏沒法在Js中直接使用（即在Js中直接NativeApp.closeWebViewPage()）,但是可以通過settimeout來觸發：

setTimeout(function(){
	console.log("setTimeout--->");
	NativeApp.getCurrentUserInfo(resultCallBack);
},500);

Android端使用（這裏省略IOS，用法基本相同）

xml佈局設置

使用該庫時，需要將原生的webView控件改爲BridgeWebView。爲了方便演示，下面多加幾個點擊控件和顯示控件。

<com.github.lzyzsd.jsbridge.BridgeWebView
    android:id="@+id/test_bridge_webView"
    android:layout_width="match_parent"
    android:layout_below="@+id/web_view"
    android:layout_height="200dp"/>
<Button
    android:id="@+id/btn_to_js"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_below="@+id/test_bridge_webView"
    android:text="Native調用JS並獲取JS返回值"
    android:layout_height="wrap_content"/>
<Button
    android:id="@+id/btn_to_js_2"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_below="@+id/btn_to_js"
    android:text="Native調用JS"
    android:layout_height="wrap_content"/>
<TextView
    android:id="@+id/tv_text"
    android:layout_margin="10dp"
    android:layout_width="match_parent"
    android:layout_below="@+id/btn_to_js_2"
    android:padding="5dp"
    android:layout_height="wrap_content"/>

Java代碼（客戶端調用）

註冊webview監聽

給WebView註冊監聽，當Html頁面調用java本地函數時，會響應。這裏第一個參數爲本地java代碼與Js端的約定協議內容，即Js指定要調用的java函數，第二個參數爲回調，即java收到Js的調用之後做的回調，這裏我將兩個合在一起處理了。

mBridgeWebView.loadUrl("file:///android_asset/new_file.html");
mBridgeWebView.registerHandler("AndroidNativeApp", new BridgeHandler() {

	@Override
	public void handler(String data, CallBackFunction function) {
		Log.e(TAG, "指定Handler接收來自web的數據：" + data);
		try {
			JSONObject jsonObject = new JSONObject(data);
			String action = jsonObject.get("action").toString();
			String data1 = jsonObject.getString("data");
            Log.e("tag", "action-- : " + action);
        	Log.e("tag", "data -- : " + data1);
        	if(action.equals("closeWebViewPage")) {
            	finish();
            } else if(action.equals("getCurrentUserInfo")) {
            	function.onCallBack(userName);
        	} else {

        	}
		} catch (JSONException e) {
			e.printStackTrace();
		}
	}
});

Java主動調用Js函數

java主動調用Js，Js給出回調返回值

this.button1.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		String data = "data from native";
		mBridgeWebView.callHandler("functionInJs", data, new CallBackFunction() {
			@Override
			public void onCallBack(String data) {
				textView.setText("Native接收到Js返回參數：" + data);
			}
		});
	}
});

java主動調用Js，不需要獲取返回值

this.button2.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View v) {
		String data = "data from native";
		mBridgeWebView.callHandler("functionInJs_2", data, null);
	}
});

測試截圖

• Js調用Android本地方法，不需要獲取返回值
  
• Js調用Android本地方法，並獲取返回值
  
  
• Android本地調用Js方法，不需要返回值
  
  
• Android本地調用Js方法，並獲取返回值
  
  

源碼分析

客戶端

在BridgeWebView的初始化方法中，添加了自定義的BridgeWebViewClient，在onPageFinished方法中，去加載WebViewJavascriptBridge.js文件（在assets目錄下）：

@Override
public void onPageFinished(WebView view, String url) {
	super.onPageFinished(view, url);
	if (BridgeWebView.toLoadJs != null) {
		BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
	}
...
}

BridgeUtil # webViewLoadLocalJs：

public static void webViewLoadLocalJs(WebView view, String path){
	String jsContent = assetFile2Str(view.getContext(), path);
	view.loadUrl("javascript:" + jsContent);
}

H5

var doc = document;
_createQueueReadyIframe(doc);
var readyEvent = doc.createEvent('Events');
readyEvent.initEvent('WebViewJavascriptBridgeReady');
readyEvent.bridge = WebViewJavascriptBridge;
doc.dispatchEvent(readyEvent);

H5端在使用的時候需要檢測是否初始化完畢：

if(window.WebViewJavascriptBridge) {
	return callback(WebViewJavascriptBridge);
} else {
	document.addEventListener(
		'WebViewJavascriptBridgeReady',
		function() {
			return callback(WebViewJavascriptBridge);
		},
		false
	);
}

Native調用JS

jsBridgeWebview.callHandler(String handlerName, String data, CallBackFunction callBack);

public interface CallBackFunction {
	public void onCallBack(String data);
}

callHandler方法中調用doSend方法（參數：方法名； 數據； 回調）：

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

doSend方法中，將參數封裝到Message對象中（注意這個Message不是Android SDK中的Message，是該開源庫自己封裝的Message）；

方法名和數據判空後放入Message對象，單獨看下回調：

生成每個callBack唯一對應的id（其實就是一個固定格式的字符串，用於存儲在Map中的key值）：

String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));

格式：“JAVA_CB_%s” + uniqueId + “_” + 當前時間毫秒值；uniqueId：一個自增的int類型值，默認值爲0；

然後將其放入消息隊列中（List）：

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

走到這裏會看到，startupMessage在直接聲明的時候就初始化了，怎麼會爲空？翻到BridgeWebViewClient類中的onPageFinished方法：

@Override
public void onPageFinished(WebView view, String url) {
	...
	if (webView.getStartupMessage() != null) {
		for (Message m : webView.getStartupMessage()) {
			webView.dispatchMessage(m);
		}
		webView.setStartupMessage(null);
	}
}

這裏可以看到，webview內容加載完之後，會遍歷這個startupMessage隊列，去調用BridgeWebView中的dispatchMessage方法，將Message作爲參數，並且將startupMessage隊列置爲null；

dispatchMessage方法：

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對象轉爲Json並做一些處理，最終轉爲js命令：

“javascript:WebViewJavascriptBridge._handleMessageFromNative(’%s’);”，參數爲json；
最終在java主線程中調用loadUrl方法，去執行WebViewJavascriptBridge.js中的方法_handleMessageFromNative；

WebViewJavascriptBridge.js

//提供給native調用,receiveMessageQueue 在會在頁面加載完後賦值爲null,所以
function _handleMessageFromNative(messageJSON) {
	console.log(messageJSON);
	if (receiveMessageQueue && receiveMessageQueue.length > 0) {
		receiveMessageQueue.push(messageJSON);
	} else {
		_dispatchMessageFromNative(messageJSON);
	}
}

在webview加載完js，即onPageFinished方法後，receiveMessageQueue被置爲null，所以這裏直接執行了_dispatchMessageFromNative方法；

//提供給native使用,
function _dispatchMessageFromNative(messageJSON) {
	setTimeout(function() {
		var message = JSON.parse(messageJSON);
		var responseCallback;
		//java call finished, now need to call js callback function
		if (message.responseId) {
			responseCallback = responseCallbacks[message.responseId];
			if (!responseCallback) {
				return;
			}
			responseCallback(message.responseData);
			delete responseCallbacks[message.responseId];
		} else {
			//直接發送
			if (message.callbackId) {
				var callbackResponseId = message.callbackId;
				responseCallback = function(responseData) {
					_doSend({
						responseId: callbackResponseId,
						responseData: responseData
					});
				};
			}

			var handler = WebViewJavascriptBridge._messageHandler;
			if (message.handlerName) {
				handler = messageHandlers[message.handlerName];
			}
			//查找指定handler
			try {
				handler(message.data, responseCallback);
			} catch (exception) {
				if (typeof console != 'undefined') {
					console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
				}
			}
		}
	});
}

（若responseId不爲空，意味着js調用Native並且js有回調，這裏表明Native將js回調需要的數據傳過來了，從回調函數隊列里根據responseId取出回調函數，如果該函數不爲空，執行該回調函數，並移除回調函數隊列裏的該回調函數；）

該方法中，首先將json參數轉爲Message對象；

Native調用Js時沒有responseId，所以直接跳轉到else分支，判斷callbackId，即Native是否需要js返回數據，如果需要，則初始化一個回調函數，裏面調用_doSend方法，將responseId和responseData封裝到message中，放入消息隊列裏；

從messageHandlers中通過handlerName匹配對應的handler（即在Js註冊的時候設置的）；執行該方法，參數爲message中的data，即native中傳遞的data，以及上面初始化的回調函數；

這裏結合H5註冊接口說一下：

WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
	...
	responseCallback(responseData); // 爲Native返回數據
});

WebViewJavascriptBridge.js #

function registerHandler(handlerName, handler) {
	messageHandlers[handlerName] = handler;
}

可以看到這裏在H5頁面中註冊的供Native調用的方法被添加到messageHandlers隊列中，key值爲方法名；所以上面取出的handler即爲該註冊的方法中定義的回調方法；其中data爲Java端傳來的data，responseCallback爲上面初始化的function：

responseCallback = function(responseData) {
	_doSend({
		responseId: callbackResponseId,
		responseData: responseData
	});
};

再看一下_doSend方法：

//sendMessage add message, 觸發native處理 sendMessage
function _doSend(message, responseCallback) {
	...
	sendMessageQueue.push(message);
	messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}

將message對象存入sendMessageQueue隊列，改變iframe的src屬性，觸發Java端WebViewClient的shouldOverrideUrlLoading方法執行；

src=”yy://__QUEUE_MESSAGE__/”;

其實這裏是相當於Js跟Webview定義了一個協議，協議爲該src，當webview攔截url時，如果是這個已經定義好的協議，則做相應的處理；

回到BridgeWebViewClient類的shouldOverrideUrlLoading方法中:

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
	...
	if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回數據
		webView.handlerReturnData(url);
		return true;
	} else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //
		webView.flushMessageQueue();
		return true;
	} else {
		return super.shouldOverrideUrlLoading(view, url);
	}
}

攔截1：url是以"yy://return/"開頭的，調用BridgeWebView的handlerReturnData方法，這時是js爲Native端返回數據；

攔截2：url是以"yy://"開頭的，調用BridgeWebView的flushMessageQueue方法，去刷新消息隊列；

這裏由於url是滿足第二條，所以先看flushMessageQueue方法：

BridgeWebView#flushMessageQueue：

void flushMessageQueue() {
	if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
		loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
			@Override
			public void onCallBack(String data) {
				...
			}
		});
	}
}

該方法要在主線程執行，調用loadUrl方法：

private void loadUrl(String jsUrl, CallBackFunction returnCallback) {
	this.loadUrl(jsUrl);
	responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback);
}

JS_FETCH_QUEUE_FROM_JAVA = "javascript:WebViewJavascriptBridge._fetchQueue();"

即調用Js的_fetchQueue方法，將創建的回調對象，以_fetchQueue爲key值存入responseCallbacks中；

觸發Js的_fetchQueue方法去返回數據，在Native去根據回調解析數據做出相應的處理；

WebViewJavascriptBridge.js # _fetchQueue：

// 提供給native調用,該函數作用:獲取sendMessageQueue返回給native,由於android不能直接獲取返回的內容,所以使用url shouldOverrideUrlLoading 的方式返回內容
function _fetchQueue() {
	var messageQueueString = JSON.stringify(sendMessageQueue);
	sendMessageQueue = [];
	//android can't read directly the return data, so we can reload iframe src to communicate with java
	messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}

在該方法中，首先將js需要回傳給Native的所有數據sendMessageQueue轉爲json，然後觸發Native攔截url處理消息，url = “yy://return/_fetchQueue/returncontent”；

這裏攔截到該url，執行handlerReturnData方法：

BridgeWebView # handlerReturnData：

void handlerReturnData(String url) {
	String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
	CallBackFunction f = responseCallbacks.get(functionName);
	String data = BridgeUtil.getDataFromReturnUrl(url);
	if (f != null) {
		f.onCallBack(data);
		responseCallbacks.remove(functionName);
		return;
	}
}

從url中獲取js傳來的方法名以及Js傳來的值，從responseCallbacks隊列中根據方法名取出回調函數接口對象（該回調對象是在上面存入的key值爲_fetchQueue的回調對象），如果回調接口對象不爲空，則調用其onCallBack函數將js傳來的數據返回給Native端，將該回調函數對象從responseCallbacks隊列中移除；

這裏的回調即flushMessageQueue方法中在loadUrl中設置的回調函數：

loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
	public void onCallBack(String data) {
		// deserializeMessage
		List<Message> list = null;
		try {
			list = Message.toArrayList(data);
		} catch (Exception e) {
			...
		}
		... // 判空
		for (int i = 0; i < list.size(); i++) {
			Message m = list.get(i);
			String responseId = m.getResponseId();
			// 是否是response
			if (!TextUtils.isEmpty(responseId)) {
				CallBackFunction function = responseCallbacks.get(responseId);
				String responseData = m.getResponseData();
				function.onCallBack(responseData);
				responseCallbacks.remove(responseId);
			} else {
				...
			}
		}
	}
});

由於這裏是在js _fetchQueue方法中將整個消息隊列都返回來了，所以需要遍歷Message集合，找到對應需要的那一條；取出responseId，我們要取的消息是帶有responseId的（Native調用了js並需要回調），這個responseId其實就是一開始java需要回調時生成的callbackId，根據這個callbackId從responseCallbacks取出最開始存入的回調對象 並且執行該回調方法，在Native端拿到數據並做相應的處理；

Js調用Native

Native爲Js註冊調用接口：

mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
	@Override
	public void handler(String data, final CallBackFunction function) {
		...
	}
});

BridgeWebView # registerHandler：

public void registerHandler(String handlerName, BridgeHandler handler) {
	if (handler != null) {
		messageHandlers.put(handlerName, handler);
	}
}

註冊供Js調用的接口方法，並設置回調，如果回調不爲空，將回調方法放入messageHandlers隊列中，key值爲定義的方法名；

Js調用接口：

WebViewJavascriptBridge.callHandler('submitFromWeb', data, function(responseData) {
    ...        
});

WebViewJavascriptBridge.js中：

function callHandler(handlerName, data, responseCallback) {
	_doSend({
		handlerName: handlerName,
		data: data
	}, responseCallback);
}

返回到WebViewJavascriptBridge # _doSend方法中，將Js端的responseCallback回調函數放入responseCallbacks隊列中，key值爲生成的唯一標識callbackId，併爲message對象設置callbackId，觸發Native端去重載url並攔截；

之後的動作與Native中調Js一樣，shouldOverrideUrlLoading中攔截，執行flushMessageQueue，loadUrl，Js#_fetchQueue方法，生成回調，保存responseCallbacks中，後面繼續執行handlerReturnData，接着看loadUrl中的回調，這次由於js傳來的消息沒有responseId，直接看else分支，即上文中省略號的地方：

if (!TextUtils.isEmpty(responseId)) {
	...
} else {
	CallBackFunction responseFunction = null;
	// if had callbackId
	final String callbackId = m.getCallbackId();
	if (!TextUtils.isEmpty(callbackId)) {
		responseFunction = new CallBackFunction() {
			@Override
			public void onCallBack(String data) {
				Message responseMsg = new Message();
				responseMsg.setResponseId(callbackId);
				responseMsg.setResponseData(data);
				queueMessage(responseMsg);
			}
		};
	} else {
		responseFunction = new CallBackFunction() {
			@Override
			public void onCallBack(String data) {
				// do nothing
			}
		};
	}
	BridgeHandler handler;
	if (!TextUtils.isEmpty(m.getHandlerName())) {
		handler = messageHandlers.get(m.getHandlerName());
	} else {
		handler = defaultHandler;
	}
	if (handler != null){
		handler.handler(m.getData(), responseFunction);
	}
}

獲取callbackId，如果爲空，直接默認不做處理；

不爲空則說明Js調用了Native，需要Native回調，創建一個回調函數，最後從消息中取出方法名去匹配Native之前註冊的方法，如果不爲空，則調用該對象的回調方法；

上面Native回調不爲空時創建的回調：

responseFunction = new CallBackFunction() {
	@Override
	public void onCallBack(String data) {
		Message responseMsg = new Message();
		responseMsg.setResponseId(callbackId);
		responseMsg.setResponseData(data);
		queueMessage(responseMsg);
	}
};

將要回傳的數據封裝成message,原先從js傳過來的callbackId變成responseId，然後調用queueMessage，dispatchMessage，Js#_handleMessageFromNative，_dispatchMessageFromNative，上文中已分析該方法；