JsBridge主要用于“JS與Native的通信”,衆所周知Android 4.2以下的WebView存在addJavascriptInterface漏洞的問題,為解決這一問題國内很多知名大廠很早就在各自項目中內建了JsBridge。
衆所周知Android 4.2以下的WebView存在addJavascriptInterface漏洞的問題,不太了解的同學可參考
Android4.2下 WebView的addJavascriptInterface漏洞解決方案
@JavascriptInterface
是以,公司項目中很早便使用
JsBridge
實作 “JS與Native的通信” 了。 Native與JS通信原理
Android端WebView啟動時,會加載一段
WebViewJavascriptBridge.js
的js腳本代碼。
-
Native調用JS代碼:
當Native需要向JS端傳遞資料時,直接在Android WebView中使用
調用在WebView.loadURL(javascript:WebViewJavascriptBridge.xxxxx)
中提前定義好的WebViewJavascriptBridge.js
方法,将資料傳遞到JS端;xxxxx
-
JS調用Native代碼:
當JS需要将資料傳遞給Native時,通過JS
将資料傳遞到Native的reload iframe
方法的url參數中,Android端通過截獲url擷取JS傳遞過來的參數。shouldOverrideUrlLoading(WebView view, String url)
以此來實作Native與JS的通信。
GitHub源碼
lzyzsd/JsBridge
我注釋的JsBridge
Native調用JS代碼,向JS端傳遞資料
以下是“ Native向JS端傳遞資料,并接受JS回調資料 ”的時序圖
BridgeWebView.java
callHandler("functionInJs", "Native向JS問好", mCallBackFunction);
/**
* Native調用JS
* <p>
* call javascript registered handler
* 調用javascript處理程式注冊
*
* @param handlerName JS中注冊的handlerName
* @param data Native傳遞給JS的資料
* @param callBack JS處理完成後,回調到Native
*/
public void callHandler(String handlerName, String data, CallBackFunction callBack) {
doSend(handlerName, data, callBack);
}
注釋很全,看注釋吧,不作講解
doSend(handlerName, data, responseCallback)
/**
* Native 調用 JS
* <p>
* 儲存message到消息隊列
*
* @param handlerName JS中注冊的handlerName
* @param data Native傳遞給JS的資料
* @param responseCallback JS處理完成後,回調到Native
*/
private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
LogUtils.e(TAG, "doSend——>data: " + data);
LogUtils.e(TAG, "doSend——>handlerName: " + handlerName);
// 建立一個消息體
Message m = new Message();
// 添加資料
if (!TextUtils.isEmpty(data)) {
m.setData(data);
}
//
if (responseCallback != null) {
// 建立回調ID
String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
// 1、JS回調Native資料時候使用;key: id value: callback (通過JS傳回的callbackID 可以找到相應的CallBack方法)
responseCallbacks.put(callbackStr, responseCallback);
// 1、JS回調Native資料時候使用;key: id value: callback (通過JS傳回的callbackID 可以找到相應的CallBack方法)
m.setCallbackId(callbackStr);
}
// JS中注冊的方法名稱
if (!TextUtils.isEmpty(handlerName)) {
m.setHandlerName(handlerName);
}
LogUtils.e(TAG, "doSend——>message: " + m.toJson());
// 添加消息 或者 分發消息到JS
queueMessage(m);
}
- 做了一個
來封裝data資料Message
- 建立了一個callBackId,并将對應的引用存儲在
,這樣JS相應方法處理結束後,将JS的處理結果傳回來的時候,Native可通過該callbackId找到對應的CallBackFunction,進而完成資料回調。Map<String, CallBackFunction> responseCallbacks
/**
* BridgeWebView.java
* list<message> != null 添加到消息集合否則分發消息
*
* @param m Message
*/
private void queueMessage(Message m) {
LogUtils.e(TAG, "queueMessage——>message: " + m.toJson());
if (startupMessage != null) {
startupMessage.add(m);
} else {
// 分發消息
dispatchMessage(m);
}
}
/**
* BridgeWebView.java
* 分發message 必須在主線程才分發成功
*
* @param m Message
*/
void dispatchMessage(Message m) {
LogUtils.e(TAG, "dispatchMessage——>message: " + m.toJson());
// 轉化為JSon字元串
String messageJson = m.toJson();
//escape special characters for json string 為json字元串轉義特殊字元
messageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");
messageJson = messageJson.replaceAll("(?<=[^\\\\])(\")", "\\\\\"");
String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
LogUtils.e(TAG, "dispatchMessage——>javascriptCommand: " + javascriptCommand);
// 必須要找主線程才會将資料傳遞出去 --- 劃重點
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
// 調用JS中_handleMessageFromNative方法
this.loadUrl(javascriptCommand);
}
}
- dispatchMessage中,通過load
将Message資料傳遞到JS方法的_handleMessageFromNative當中javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');
// Native通過loadUrl(JS_HANDLE_MESSAGE_FROM_JAVA),調用JS中_handleMessageFromNative方法,實作Native向JS傳遞資料
final static String JS_HANDLE_MESSAGE_FROM_JAVA = "javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');";
WebViewJavascriptBridge.js
// 1、收到Native的消息
// 提供給native調用,receiveMessageQueue 在會在頁面加載完後指派為null,是以
function _handleMessageFromNative(messageJSON) {
//
console.log(messageJSON);
// 添加到消息隊列
if (receiveMessageQueue) {
receiveMessageQueue.push(messageJSON);
}
// 分發Native消息
_dispatchMessageFromNative(messageJSON);
}
- 這裡将Native發送過來的消息添加到
數組中。receiveMessageQueue
//2、分發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) {
...
} else {
// 消息中有callbackId 說明需要将處理完成後,需要回調Native端
//直接發送
if (message.callbackId) {
// 回調消息的 回調ID
var callbackResponseId = message.callbackId;
//
responseCallback = function(responseData) {
// 發送JS端的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);
}
}
}
});
}
demo.html
bridge.registerHandler("functionInJs", function(data, responseCallback) {
document.getElementById("show").innerHTML = ("data from Java: = " + data);
if (responseCallback) {
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
}
});
- 這裡調用到JS的functionInJs注冊方法,并将JS的處理結果
傳回,回調到WebViewJavascriptBridge.js _dispatchMessageFromNative注冊的responseCallback,進而調用到WebViewJavascriptBridge.js 的_doSend方法之中。Javascript Says Right back aka!
一下為WebViewJavascriptBridge.js 的_doSend
// 發送JS端的responseData
_doSend({
responseId: callbackResponseId,
responseData: responseData
});
// 3、JS将資料發送到Native端
// sendMessage add message, 觸發native的 shouldOverrideUrlLoading方法,使Native主動向JS取資料
//
// 把消息隊列資料放到shouldOverrideUrlLoading 的URL中不就可以了嗎?
// 為什麼還要Native主動取一次,然後再放到shouldOverrideUrlLoading的URL中傳回?
function _doSend(message, responseCallback) {
// 發送的資料存在
if (responseCallback) {
//
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
// 添加到消息隊列中
sendMessageQueue.push(message);
// 讓Native加載一個新的頁面
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
- 1、将Native發送過來的Message資料,存儲到
消息隊列中sendMessageQueue
- 2、_doSend 中 reload iframe " yy://QUEUE_MESSAGE/ " 觸發native的 shouldOverrideUrlLoading方法
BridgeWebViewClient.java
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
LogUtils.d(TAG, "shouldOverrideUrlLoading——>url: " + url);
try {
url = URLDecoder.decode(url, "UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
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);
}
}
- _doSend 中 reload iframe " yy://QUEUE_MESSAGE/ " 觸發native的 shouldOverrideUrlLoading方法,最終調用到webView.flushMessageQueue();方法中
/**
* 1、調用JS的 _fetchQueue方法,擷取JS中處理後的消息隊列。
* JS 中_fetchQueue 方法 中将Message資料傳回到Native的 {@link #BridgeWebViewClient.shouldOverrideUrlLoading}中
* <p>
* 2、等待{@link #handlerReturnData} 回調 Callback方法
*/
void flushMessageQueue() {
LogUtils.d(TAG, "flushMessageQueue");
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
// 調用JS的 _fetchQueue方法
BridgeWebView.this.loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
public void onCallBack(String data) {
// ... 此處暫時省略
}
});
}
}
- flushMessageQueue中加載了一段JS腳本,JS_FETCH_QUEUE_FROM_JAVA,以下為JS腳本的代碼。
// 調用JS的 _fetchQueue方法。_fetchQueue方法中将Message資料傳回到Native的shouldOverrideUrlLoading中
final static String JS_FETCH_QUEUE_FROM_JAVA = "javascript:WebViewJavascriptBridge._fetchQueue();";
- 這段JS腳本代碼調用到的是 WebViewJavascriptBridge.js中的 _fetchQueue方法。
// 将資料傳回給Native
// 提供給native調用,該函數作用:擷取sendMessageQueue傳回給native,由于android不能直接擷取傳回的内容,是以使用url shouldOverrideUrlLoading 的方式傳回内容
function _fetchQueue() {
// json資料
var messageQueueString = JSON.stringify(sendMessageQueue);
// message資料清空
sendMessageQueue = [];
// 資料傳回到shouldOverrideUrlLoading
//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);
}
- 這裡通過 reload iframe " yy://return/_fetchQueue/ + encodeURIComponent(messageQueueString)"将資料發送給Native的shouldOverrideUrlLoading方法中。
/**
* 1、擷取到CallBackFunction data執行調用并且從資料集移除
* <p>
* 2、回調Native{@link #flushMessageQueue()} Callback方法
*
* @param url
*/
void handlerReturnData(String url) {
LogUtils.d(TAG, "handlerReturnData——>url: " + url);
// 擷取js的方法名稱
// _fetchQueue
String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
// 擷取_fetchQueue 對應的回調方法
CallBackFunction f = responseCallbacks.get(functionName);
// 擷取body Message消息體
String data = BridgeUtil.getDataFromReturnUrl(url);
// 回調 Native flushMessageQueue callback方法
if (f != null) {
LogUtils.d(TAG, "onCallBack data" + data);
f.onCallBack(data);
responseCallbacks.remove(functionName);
return;
}
}
- 這裡的CallBackFunction 回調到了flushMessageQueue方法的onCallBack中。
@Override
public void onCallBack(String data) {
LogUtils.d(TAG, "flushMessageQueue——>data: " + data);
// deserializeMessage 反序列化消息
List<Message> list = null;
try {
list = Message.toArrayList(data);
} catch (Exception e) {
e.printStackTrace();
return;
}
if (list == null || list.size() == 0) {
LogUtils.e(TAG, "flushMessageQueue——>list.size() == 0");
return;
}
for (int i = 0; i < list.size(); i++) {
Message m = list.get(i);
String responseId = m.getResponseId();
/**
* 完成Native向JS發送資訊後的回調
*/
// 是否是response CallBackFunction
if (!TextUtils.isEmpty(responseId)) {
CallBackFunction function = responseCallbacks.get(responseId);
String responseData = m.getResponseData();
function.onCallBack(responseData);
responseCallbacks.remove(responseId);
} else {
// ... 此處暫時省略
}
}
}
- 這裡循環了從JS端擷取到的Message隊列,并将JS端擷取的資料,回調到了Native中對應的CallBackFunction中。
到這裡,JsBridge中Native調用JS代碼的通信,則完成了。
一個問題
WebViewJavascriptBridge.js的_doSend(message, responseCallback)方法中,把Message消息隊列 放到
shouldOverrideUrlLoading 的URL
中直接傳回給Native不就可以了嗎?
為什麼還要用_doSend 中 reload iframe " yy://QUEUE_MESSAGE/ " 觸發native的 shouldOverrideUrlLoading方法,讓Native主動向JS請求一次Message隊列,然後再放到shouldOverrideUrlLoading的URL中傳回給Native呢?
個人觀點:
覺得,這樣将Message集中在一起,通過發送一個消息給Native,讓Native主動将所有資料請求回來。避免了JS與Native的頻繁互動。
JS調用Native代碼,向Native傳遞資料
不太想說了,就到這吧