本文分析的是https://github.com/lzyzsd/JsBridge这个开源库,
网络上很多关于这个库的分析,但是根据本人的理解思路,我也写了一份分析文章.
先讲一下该库的目的或者说功能:让js和java能够互相调用.
那么怎么互相调用呢?
我们以这个库提供的例子作为分析对象
java调用 js:
webView.callHandler("functionInJs", "data from Java", new CallBackFunction() {
@Override
public void onCallBack(String data) {
// TODO Auto-generated method stub
Log.i(TAG, "reponse data from js " + data);
}
});
对,就是这么简单,调用了webView.callHandler就可以了,注意,这个webView.callHandler并不是源生webview的方法,而是这个库实现的方法.
js调用java:
方法一:
window.WebViewJavascriptBridge.send(
data
, function(responseData) {
document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
}
);
方法二:
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': '中文测试'}
, function(responseData) {
document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
}
);
这两种方法的的区别是方法一没有设置handlername.方法二有设置: 'submitFromWeb'
后面会讲设置这个handlername有什么作用.
我们以js调用java的方法一为入口,一步一步分析怎么调用到java的.
方法一最后调用到WebViewJavascriptBridge.js里:
//sendMessage add message, 触发native处理 sendMessage
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
这里的message就是前面的data.responseCallback就是前面的function(responseData),可以看到,这个 _doSend做了三件事:
一,生成一个callbackId.并把这个callbackId与responseCallback一起存到responseCallbacks
这个其实就是生成生个键值对,用于保存和识别传进来的responseCallback.以便后面使用.
二, 调用了 sendMessageQueue.push(message);
把消息放到sendMessageQueue里.
三, messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;这个是什么呢?
这个其实就是用来触发java层的,通过修改iframe的src来触发webviewclient的shouldOverrideUrlLoading.这个src值是yy://__QUEUE_MESSAGE__/
此时我们切到com.github.lzyzsd.jsbridge.BridgeWebViewClient#shouldOverrideUrlLoading(android.webkit.WebView, android.webkit.WebResourceRequest):
调用到以下部分:
else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //
webView.flushMessageQueue();
return true;
可以看到,这里只调用了webView.flushMessageQueue();
这个方法只做了两件事:
一,调用loadUrl(jsUrl) 触发js调用,也就是说,我们刚从js到java代码,现在又回到js里了.这个jsUrl是BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA,也就是
final static String JS_FETCH_QUEUE_FROM_JAVA = "javascript:WebViewJavascriptBridge._fetchQueue();";
二,创建CallBackFunction对象,并保存到responseCallbacks里.
我们看一下js里面做了什么:
// 提供给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调到java的时候生成了一个message然后放到sendMessageQueue里的事吗.
这里就是把sendMessageQueue里的message取出来,转成json.然后拼装到messagingIframe.src 里.此时又会触发一次webviewclient的shouldOverrideUrlLoading:
if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回数据
webView.handlerReturnData(url);
return true;
由于此次src值变了.此次走到的是上面这段.注意,此时我们又回到java代码了.我们看一下这个handlerReturnData的实现:
/**
* 获取到CallBackFunction data执行调用并且从数据集移除
* @param url
*/
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;
}
}
这段代码就是取回第一次调用到shouldOverrideUrlLoading的时候我们设置的一个callback,也就是com.github.lzyzsd.jsbridge.BridgeWebView#flushMessageQueue里我们设置的new CallBackFunction()
/**
* 刷新消息队列
*/
void flushMessageQueue() {
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
public void onCallBack(String data) {
// deserializeMessage 反序列化消息
List list = null;
try {
list = Message.toArrayList(data);
} catch (Exception e) {
e.printStackTrace();
return;
}
if (list == null || list.size() == 0) {
return;
}
for (int i = 0; i < list.size(); i++) {
Message m = list.get(i);
String responseId = m.getResponseId();
// 是否是response CallBackFunction
if (!TextUtils.isEmpty(responseId)) {
CallBackFunction function = responseCallbacks.get(responseId);
String responseData = m.getResponseData();
function.onCallBack(responseData);
responseCallbacks.remove(responseId);
} else {
CallBackFunction responseFunction = null;
// if had callbackId 如果有回调Id
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执行
BridgeHandler handler;
if (!TextUtils.isEmpty(m.getHandlerName())) {
handler = messageHandlers.get(m.getHandlerName());
} else {
handler = defaultHandler;
}
if (handler != null){
handler.handler(m.getData(), responseFunction);
}
}
}
}
});
}
}
可以看出,最关键的调用都在这里了.我们重点一段一段贴出来分析一下:
String responseId = m.getResponseId();
// 是否是response CallBackFunction
if (!TextUtils.isEmpty(responseId)) {
CallBackFunction function = responseCallbacks.get(responseId);
String responseData = m.getResponseData();
function.onCallBack(responseData);
responseCallbacks.remove(responseId);
}
先判断message是否有responseId.这个responseId是什么呢,这个先不分析,从js调用到java的流程里,我们没看到有设置这个.
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);
}
};
callbackId这个我们设置了.在前面说的方法一里,
function(responseData) {
document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
}
这个就是callbackId.所以这里创建了一个新的message.并且设置了setResponseId,然后调用了queueMessage.这个后面分析.
BridgeHandler handler;
if (!TextUtils.isEmpty(m.getHandlerName())) {
handler = messageHandlers.get(m.getHandlerName());
} else {
handler = defaultHandler;
}
if (handler != null){
handler.handler(m.getData(), responseFunction);
}
这个messageHandlers又是什么呢.
我们在前面的方法一和方法二里有看到区别,其实方法一就是没有设置messageHandlers.方法二就是有设置messageHandlers.
这个messageHandlers通过com.github.lzyzsd.jsbridge.BridgeWebView#registerHandler进行注册.传入的参数是js和java双方约定好的.
/**
* register handler,so that javascript can call it
* 注册处理程序,以便javascript调用它
* @param handlerName handlerName
* @param handler BridgeHandler
*/
public void registerHandler(String handlerName, BridgeHandler handler) {
if (handler != null) {
// 添加至 Map
messageHandlers.put(handlerName, handler);
}
}
分析完后,我们就清楚了,假如是js调用到java.双方约定一个字符串作为handlerName,然后,js通过方法二调用到java.这个时候,java就会通过registerHandler注册的handler,来执行约定的事情.
我们来看一下刚才遗留的queueMessage,
这个方法最后走到
com.github.lzyzsd.jsbridge.BridgeWebView#dispatchMessage
/**
* 分发message 必须在主线程才分发成功
* @param m Message
*/
void dispatchMessage(Message m) {
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);
// 必须要找主线程才会将数据传递出去 --- 划重点
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
this.loadUrl(javascriptCommand);
}
}
也就是调用到了WebViewJavascriptBridge._handleMessageFromNative.这个在WebViewJavascriptBridge.js里.我们去看一下这个的实现:
//提供给native调用,receiveMessageQueue 在会在页面加载完后赋值为null,所以
function _handleMessageFromNative(messageJSON) {
console.log(messageJSON);
if (receiveMessageQueue) {
receiveMessageQueue.push(messageJSON);
}
_dispatchMessageFromNative(messageJSON);
}
这里调用到 _dispatchMessageFromNative(messageJSON);
//提供给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);
}
}
}
});
}
这个的逻辑和前面的flushMessageQueue很像
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
}
这里的responseCallback.实际上就是方法一中js调用java时,传入的 function(responseData),在前面分析_doSend的时候设置的.也就是调用了一次js调用java时传入的function(responseData).
至此,js调用java就结束了.
网友评论