JsBridge工作原理分析

项目地址

辅助资料

因果关系

这是第一次真正意义上，阅读源码，起因是公司的一款App有大量需求是原生要与网页之间进行交互，而大家都知道Android低版本下与网页交互之间存在漏洞，还不了解这个漏洞是怎么回事的可参照WebView的Js对象注入漏洞解决方案，再此不在赘述。

总体概括

java 调用js的方式webview.loadUrl("javascript:方法名");
js调用java的方式通过iframe.src的方式触发shouldOverrideUrlLoading方法
从哪来就回哪去(从哪个端来就回到哪个端去)
你call我，我就response给你(responseId和callbackId的转换)

核心类

JsBridge核心类

寻找入口

拿到这个工程后，首先要找到程序的入口，不难发现，在示例代码中：

webView.loadUrl("file:///android_asset/demo.html");

而该WebView是JsBridge里的BridgeWebView，代码有：

<com.github.lzyzsd.jsbridge.BridgeWebView
  android:id="@+id/webView"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >
</com.github.lzyzsd.jsbridge.BridgeWebView>

//代码中初始化
webView = (BridgeWebView) findViewById(R.id.webView);

我们将目光转移到这个BridgeWebView上，该类继承系统WebView，顺带也看看当这个类初始化都做了哪些事情代码有：

public class BridgeWebView extends WebView {
    // ......
   public BridgeWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public BridgeWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }
    public BridgeWebView(Context context) {
        super(context);
        init();
    }

    private void init() {
        this.setVerticalScrollBarEnabled(false);
        this.setHorizontalScrollBarEnabled(false);
        this.getSettings().setJavaScriptEnabled(true);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }
        // 设置WebViewClient
        this.setWebViewClient(generateBridgeWebViewClient());
    }

    protected BridgeWebViewClient generateBridgeWebViewClient() {
        return new BridgeWebViewClient(this);
    }
    //......
}

至此程序已经将我们的目光锁定在了BridgeWebViewClient中，该类同样是继承系统WebViewClient，其关键点是在onPageFinished方法中，程序是在此处给目标网页注入了一段javascript代码，这段javascript代码应该就是工程名中的Bridge，至于是如何起到Bridge效果的，敬请看下文介绍，代码有：

public class BridgeWebViewClient extends WebViewClient {
    //......
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        //页面加载结束, 注入本地js代码
        if (BridgeWebView.toLoadJs != null) {
            BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
        }

        if (webView.getStartupMessage() != null) {
            for (Message m : webView.getStartupMessage()) {
                webView.dispatchMessage(m);
            }
            webView.setStartupMessage(null);
        }
    }
    //......
}

接着程序的路径往下走，我们看看
BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);都做了哪些操作，代码有：

public static void webViewLoadLocalJs(WebView view, String path){
    //读取本地js代码
    String jsContent = assetFile2Str(view.getContext(), path);
    
    //通过loadUrl的方式调用网页方法
    view.loadUrl("javascript:" + jsContent);
}

至此程序已经初始化完毕，接下来我们将工程的功能分为两个方面来展开分析，一个是 java call js ,另一个则是 js call java

java call js

言外之意也便是客户端调用网页方法，要完成这个操作客户端和网页都需要初始化一些工作，代码有：
客户端：

@Override
public void onClick(View v) {
    if (button.equals(v)) {
        webView.callHandler("functionInJs", "data from Java", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Log.i(TAG, "reponse data from js ：" + data);
            }
        });
    }
}

网页端：

bridge.registerHandler("functionInJs", function(data, responseCallback) {
    document.getElementById("show").innerHTML = ("data from Java: = " + data);
    var responseData = "Javascript Says Right back aka!";
    responseCallback(responseData);
});

//而调用了bridge.registerHandler方法后,js库中做的操作有
function registerHandler(handlerName, handler) {
    //保存该handler，即上文中的function(data, responseCallback)
    messageHandlers[handlerName] = handler;
}

既然是java call js那么主动权就应在java端，那么我们来看看客户端的初始化工作具体做了哪些事情以及当触发了事件后都做了什么，代码有：

public void callHandler(String handlerName, String data, CallBackFunction callBack) {
    doSend(handlerName, data, callBack);
}

private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
    //准备Message
    Message m = new Message();
    if (!TextUtils.isEmpty(data)) {
        //为message添加data元素
        m.setData(data);
    }
    
    //保存responseCallback
    if (responseCallback != null) {
        String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
        responseCallbacks.put(callbackStr, responseCallback);
        
        //为message添加callbackId元素
        m.setCallbackId(callbackStr);
    }
    
    if (!TextUtils.isEmpty(handlerName)) {

        //为message添加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,以及保存responseCallback,为的是接收网页响应数据的一个回调。执行完this.loadUrl(javascriptCommand);后，让我们来看看是要去执行js库中的哪个方法，根据断点或者打印日志的方式最后拿到javascriptCommand的值是：

javascriptCommand="javascript:WebViewJavascriptBridge._handleMessageFromNative('{\"callbackId\":\"JAVA_CB_1_3799\",\"data\":\"data from Java\",\"handlerName\":\"functionInJs\"}');"

所以程序来到js中，客户端将传递的data,作为_handleMessageFromNative()函数的参数，对应的_handleMessageFromNative()方法有：

function _handleMessageFromNative(messageJSON) {
    console.log(messageJSON);
    if (receiveMessageQueue && receiveMessageQueue.length > 0) {
        receiveMessageQueue.push(messageJSON);
    } else {
        //程序走到这里
        _dispatchMessageFromNative(messageJSON);
    }
}

function _dispatchMessageFromNative(messageJSON) {
    setTimeout(function() {
        var message = JSON.parse(messageJSON);
        var responseCallback;
        if (message.responseId) {
            responseCallback = responseCallbacks[message.responseId];
            if (!responseCallback) {
                return;
            }
            responseCallback(message.responseData);
            delete responseCallbacks[message.responseId];
        } else {
            //还记得我们message中元素吗？ callbackId，handlerName, data,所以程序会走到这里
            if (message.callbackId) {
                var callbackResponseId = message.callbackId;
                //声明 responseCallback，注意里面会调用 _doSend方法，稍后会用到
                responseCallback = function(responseData) {
                    _doSend({
                        responseId: callbackResponseId,
                        responseData: responseData
                    });
                };
            }
            
            var handler = WebViewJavascriptBridge._messageHandler;
            if (message.handlerName) {
                //还记得网页在初始化的时候，保存的handler吗？
                handler = messageHandlers[message.handlerName];
            }
            //查找指定handler
            try {
                //通过handlerName能到Handler，也就是调用demo.html中registerHandler时的那个callback函数，data是客户端给网页的数据，而responseCallback就是网页在收到消息后回调给客户端的Callback
                handler(message.data, responseCallback);
            } catch (exception) {
                if (typeof console != 'undefined') {
                    console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
                }
            }
        }
    });
}

通过上面的js代码handler(message.data, responseCallback);data我们不再关心，网页拿到它后想看什么就干什么主要还是看心情吧！我们现在关心的是这个responseCallback是干嘛的？因为从哪里来回哪里去，我们是从客户端而来，最终也要叶落归根回到客户端。言归正传还记得刚才那个responseCallback是怎样声明的吗？这里我们需要注意的是js代码将客户端的callbackId转换成了responseId,至于为什么转换，看看概括中说的，你call我，我就response给你，如下：

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

那么让我们来看看_doSend方法都做了哪些工作，注意关键转折点就在此处了，看看是如何将网页代码又再次拉扯到客户端的：

function _doSend(message, responseCallback) {
    if (responseCallback) {
        var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
        responseCallbacks[callbackId] = responseCallback;
        message.callbackId = callbackId;
    }
    //保存网页返回给客户端的数据
    sendMessageQueue.push(message);

    //通过Iframe.src来触发客户端的shouldOverrideUrlLoading方法，进而将网页拉回到客户端
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}

注意上面有提到保存网页返回给客户端的数据，既然push了数据，那么肯定会回来取该数据(至于什么时候来取请接着往下看)。还有很重要的一点是通过Iframe.src来触发客户端的shouldOverrideUrlLoading方法，进而将网页拉回到客户端,所以程序又回到了客户端的shouldOverrideUrlLoading方法，代码有：

@Override
public boolean shouldOverrideUrlLoading(WebView view, String 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;
    //自定义schema
    } else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { 
        //根据js的代码可得知url是yy://__QUEUE_MESSAGE__/
        webView.flushMessageQueue();
        return true;
    } else {
        return super.shouldOverrideUrlLoading(view, url);
    }
}

走到这个地方后，通俗理解是客户端已经得知了js有给我响应数据了，至于是什么数据，以及该怎么去取，派谁去取目前还是个问题，闲话少活，继续追踪代码：

void flushMessageQueue() {
    if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
        loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {

            @Override
            public void onCallBack(String data) {
                List<Message> 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();
                    if (!TextUtils.isEmpty(responseId)) {
                        CallBackFunction function = responseCallbacks.get(responseId);
                        String responseData = m.getResponseData();
                        function.onCallBack(responseData);
                        responseCallbacks.remove(responseId);
                    } else {
                        CallBackFunction responseFunction = null;
                        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);
                        }
                    }
                }
            }
        });
    }
}

可以看看上面的flushMessageQueue()方法一言不合就先调用了loadUrl方法，我们不得不好奇这个方法做了哪些操作：

public void loadUrl(String jsUrl, CallBackFunction returnCallback) {
    //jsUrl="javascript:WebViewJavascriptBridge._fetchQueue();"
    this.loadUrl(jsUrl);
    responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback);
}

loadUrl的主要功能是客户端要派人去取网页返回给客户端的数据了，在此时此刻，先给这个取数据的人起一个名字，即_fetchQueue,然后记录在小本本上，方便取回来后汇报工作给领导。既然已经派人去取东西，那我们悄悄跟着它：

function _fetchQueue() {
    //取事先在_doSend方法中保存的数据
    var messageQueueString = JSON.stringify(sendMessageQueue);

    //取完之后清空数据队列
    sendMessageQueue = [];

    //Iframe.src=yy://return/_fetchQueue/[{"responseId":"JAVA_CB_1_2522","responseData":"Javascript Says Right back aka!"}]
    //元素有responseId  responseData
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}

取完数据之后，高高兴兴赶紧给领导报告，同样是通过Iframe.src的方式来触发shouldOverrideUrlLoading方法

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    try {
        url = URLDecoder.decode(url, "UTF-8");
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
    }

    // 如果是返回数据
    if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { 
        //根据js的代码可得知url是yy://return/_fetchQueue/[{"responseId":"JAVA_CB_1_2522","responseData":"Javascript Says Right back aka!"}]
        webView.handlerReturnData(url);
        return true;
    //自定义schema
    } else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { 
        webView.flushMessageQueue();
        return true;
    } else {
        return super.shouldOverrideUrlLoading(view, url);
    }
}

客户端拿到这个Url之后就要解析该Url,因为Url里面有网页返回的数据

void handlerReturnData(String url) {
    //解析url拿到函数名称
    String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
    
    //通过函数名称获取CallBackFunction
    CallBackFunction f = responseCallbacks.get(functionName);
    
    //解析Url获取数据
    String data = BridgeUtil.getDataFromReturnUrl(url);
    if (f != null) {
        //获取数据响应给客户端
        f.onCallBack(data);
        //清除该消息
        responseCallbacks.remove(functionName);
        return;
    }
}

还记得那个小本本上记录的东西吗？_fetchQueue有没有想到点什么？所以我们需要在小本本上查找到这个_fetchQueue的callback
这个callback其实就是在flushMessageQueue()方法中调用loadUrl时候保存的callback,所以程序就要回到那个callback中：

void flushMessageQueue() {
    if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
        loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {

            @Override
            public void onCallBack(String data) {
                //程序最终来到这里
                List<Message> 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();
                    if (!TextUtils.isEmpty(responseId)) {
                        // 进而走到这个分支内，还记得网页返回给我们的元素吗？responseId 、responseData,
                        CallBackFunction function = responseCallbacks.get(responseId);
                        String responseData = m.getResponseData();
                        function.onCallBack(responseData);
                        responseCallbacks.remove(responseId);
                    } else {
                        CallBackFunction responseFunction = null;
                        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);
                        }
                    }
                }
            }
        });
    }
}

终于客户端拿到了数据，终于要响应给我们了，当程序进入这个分支后

if (!TextUtils.isEmpty(responseId)) {
    CallBackFunction function = responseCallbacks.get(responseId);
    String responseData = m.getResponseData();
    function.onCallBack(responseData);
    responseCallbacks.remove(responseId);
}

这里的responseId就是客户端最起初始化生成的callbackId,只是在js_doSend方法的时候将客户端的callbackId转换为了responseId，而这个callbackId里面可存有客户端的handler，是客户端接收网页数据的回调，程序最终回到下面代码的onCallBack方法中：

@Override
public void onClick(View v) {
    if (button.equals(v)) {
        webView.callHandler("functionInJs", "data from Java", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Log.i(TAG, "reponse data from js ：" + data);
            }
        });
    }
}

可以舒口气了，至此打完收工，特奉上整个流程的示意图：

java_call_js

js call java

上面费了九牛二虎之力，终于将java call js说清楚，好的那我们接下来继续谈谈js call java那些事，想多了，想多了。。。由于有了上面的基础，理解js call java并没有那么难了，还是交给聪明的你去完成，在此只奉上流程示意图。

js_call_java

总结

通过一系列打断点打印日志的方式，完美的熟悉了解了JsBridge的工作原理，读完之后，体会到了程序设计之巧妙以及简洁，虽不是很复杂，但为以后阅读其他源码打下了坚实的基础，由易至难，以此为起点再次出发！最后感谢您耐心的看完了整篇文章。

最后编辑于：2017.12.06 14:58:43

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343