WebViewJavascriptBridge原理解析

WebViewJavascriptBridge框架可以同时支持UIWebView及WKWebView，完成native与web的交互。其主要核心思路是native在webView的代理中拦截url，根据url来做不同处理！

框架结构主要结构为：

WebViewJavascriptBridge、WKWebViewJavascriptBridge
这两个类分别为UIWebView与WKWebView与web交互桥梁，native与web的交互工作主要通过这两个类处理

WebViewJavasciptBridge_JS
该类是web的JS环境，客户端需要在网页初始化的时候注入到web端，
只有一个返回值为NSString的方法

NSString* WebViewJavascriptBridge_js(void)

WebViewJavascriptBridgeBase
该类有两个重要的属性：

  • NSMutableDictionary *responseCallbacks--存储内容有
  1. callbackId为key，objc_cb_(_uniqueId)为值，其中_uniqueId会递增
  2. objc_cb_(_uniqueId)为key，回调方法为值
  3. handlerName为key，参入的该参数为值
  • NSMutableDictionary *messageHandlers—存储客户端注册方法的方法及实现

本文会从以下几点分析该框架：
1.js注入
2.web调用native的实现
3.native调用web的实现

js注入

web端通过执行setupWebViewJavascriptBridge，完成js注入

function setupWebViewJavascriptBridge(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 = 'wvjbscheme://__BRIDGE_LOADED__';
 document.documentElement.appendChild(WVJBIframe);
 setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

web执行WVJBIframe.src = 'wvjbscheme://BRIDGE_LOADED'向native发送消息，native通过webView:decidePolicyForNavigationAction:decisionHandler:拦截消息
wvjbscheme://__BRIDGE_LOADED__，并执行[_base injectJavascriptFile]

- (void)injectJavascriptFile {
    NSString *js = WebViewJavascriptBridge_js();
    [self _evaluateJavascript:js];
    if (self.startupMessageQueue) {
        NSArray* queue = self.startupMessageQueue;
        self.startupMessageQueue = nil;
        for (id queuedMessage in queue) {
            [self _dispatchMessage:queuedMessage];
        }
    }

通过_evaluateJavascript:js将WebViewJavascriptBridge_js中内容进行注入

web调用native的实现

  1. native本地注册方法
[self.jsBridge registerHandler:@"JSCallOC"handler:^(iddata,WVJBResponseCallbackresponseCallback) {

 responseCallback(@"hahaha");
 NSLog(@"data:%@----responseCallback:%@", data, responseCallback);
}];

该注册方法内部实现主要是将注册方法名和方法实现存储到messageHandlers中

- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler {

   _base.messageHandlers[handlerName] = [handlercopy];
}
  1. web端通过按钮的点击调用
WebViewJavascriptBridge.callHandler('JSCallOC',{'lmf':'cool'},function(response) {
 alert(response);
})

上面方法中的WebViewJavascriptBridge为注入的js环境提供的，callHandler方法也是环境中的代码实现的，这个js环境是在加载网页时，注入的
接下来看下callHandler的实现

function callHandler(handlerName, data, responseCallback) {
    if (arguments.length == 2 && typeof data == 'function') {
        responseCallback = data;
        data = null;
    }
    _doSend({ handlerName:handlerName, data:data }, responseCallback);
}
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;
}

这个方法中主要做了：

  • 在对象中加了一个callbackId字段，这个字段是为了客户端在调完方法后，网页可以找到对应的回调，同时以回调方法为value，callbackId的值为key存入responseCallbacks中
    最终的message为：
{
 handlerName : ‘JSCallOC’,
 data : {‘lmf’:’cool’},
 callbackId : ‘cb_’+(uniqueId++)+’_’+new Date().getTime(),
}
  • 以callbackId为key，回调 function(response) { alert(response); }为value，存入responseCallbacks
  • 将上面的message，push到sendMessageQueue中，并执行
    messageIframe.src = CUSTOM_PROTOCOL_SCHEME+'://'+QUEUE_HAS_MESSAGE
    即messageIframe.src = 'https://__wvjb_queue_message__'
  1. native通过webView:decidePolicyForNavigationAction:decisionHandler:拦截消息https://__wvjb_queue_message__，进而执行WKFlushMessageQueue
- (void)WKFlushMessageQueue {
    [_webView evaluateJavaScript:[_base webViewJavascriptFetchQueyCommand] completionHandler:^(NSString* result, NSError* error) {
        if (error != nil) {
            NSLog(@"WebViewJavascriptBridge: WARNING: Error when trying to fetch data from WKWebView: %@", error);
        }
        [_base flushMessageQueue:result];
    }];
}

webViewJavascriptFetchQueryCommand的实现如下

- (NSString*)webViewJavascriptFetchQueyCommand {

   return@"WebViewJavascriptBridge._fetchQueue();";
}

即WKFlushMessageQueue方法会执行web端的_fetchQueue

function _fetchQueue() {

 var messageQueueString = JSON.stringify(sendMessageQueue);
 sendMessageQueue = [];
 return messageQueueString;
}

result数据内容为：

[
{“handlerName”:”JSCallOC”,
”data”:{“lmf”:”cool”},
”callbackId”:”cb_1_15709533997161"}
]

再通过执行[_base flushMessageQueue:result];

- (void)flushMessageQueue:(NSString *)messageQueueString{
    if (messageQueueString == nil || messageQueueString.length == 0) {
        NSLog(@"WebViewJavascriptBridge: WARNING: ObjC got nil while fetching the message queue JSON from webview. This can happen if the WebViewJavascriptBridge JS is not currently present in the webview, e.g if the webview just loaded a new page.");
        return;
    }

    id messages = [self _deserializeMessageJSON:messageQueueString];
    for (WVJBMessage* message in messages) {
        if (![message isKindOfClass:[WVJBMessage class]]) {
            NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message);
            continue;
        }
        [self _log:@"RCVD" json:message];
        
        NSString* responseId = message[@"responseId"];
        if (responseId) {
            WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
            responseCallback(message[@"responseData"]);
            [self.responseCallbacks removeObjectForKey:responseId];
        } else {
            WVJBResponseCallback responseCallback = NULL;
            NSString* callbackId = message[@"callbackId"];
            if (callbackId) {
                responseCallback = ^(id responseData) {
                    if (responseData == nil) {
                        responseData = [NSNull null];
                    }
                    
                    WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
                    [self _queueMessage:msg];
                };
            } else {
                responseCallback = ^(id ignoreResponseData) {
                    // Do nothing
                };
            }
            
            WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];
            
            if (!handler) {
                NSLog(@"WVJBNoHandlerException, No handler for message from JS: %@", message);
                continue;
            }
            
            handler(message[@"data"], responseCallback);
        }
    }
}

存在callbackId，生成responseCallback

//responseCallback
^(id responseData) {
 if (responseData == nil) {
 responseData = [NSNull null];
 }                   
 WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData };
 [self _queueMessage:msg];
};

messageHandlers通过message[@"handlerName"]获取native注册的方法handler，并执行
handler(message[@"data"], responseCallback);

  1. 执行注册的方法，并调用responseCallback传入参数hahaha，得到msg-@{ @"responseId":@"cb_1_1587911907256", @"responseData":@"hahaha" }
    再执行_queueMessage
- (void)_queueMessage:(WVJBMessage*)message {
    if (self.startupMessageQueue) {
        [self.startupMessageQueue addObject:message];
    } else {
        [self _dispatchMessage:message];
    }
}
//执行js回调
- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    [self _log:@"SEND" json:messageJSON];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
    
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
    if ([[NSThread currentThread] isMainThread]) {
        [self _evaluateJavascript:javascriptCommand];

    } else {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [self _evaluateJavascript:javascriptCommand];
        });
    }
}

该方法会执行web端的WebViewJavascriptBridge._handleMessageFromObjC(message.string);

  1. 执行js端的_handleMessageFromObjC
function _handleMessageFromObjC(messageJSON) {
 _dispatchMessageFromObjC(messageJSON);
}
function _dispatchMessageFromObjC(messageJSON) {
    if (dispatchMessagesWithTimeoutSafety) {
        setTimeout(_doDispatchMessageFromObjC);
    } else {
         _doDispatchMessageFromObjC();
    }
    
    function _doDispatchMessageFromObjC() {
        var message = JSON.parse(messageJSON);
        var messageHandler;
        var responseCallback;

        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({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
                };
            }
            
            var handler = messageHandlers[message.handlerName];
            if (!handler) {
                console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
            } else {
                handler(message.data, responseCallback);
            }
        }
    }
}

判断存在responseId，通过responseId从responseCallbacks获取回调，并传入responseData执行回调，再从responseCallbacks中删除responseId的数据

至此完成JS调用native的一次交互

native调用web的实现

native调用web与web调用native的思路大致相似。

  1. 在native调用前，web已经注册了方法，下面为web注册方法的代码：
//web
bridge.registerHandler('OCCallJS',function(data, responseCallback) {

 alert('JS方法被调用:'+data);           
 responseCallback('js执行过了');
})

//注入的js环境
function registerHandler(handlerName, handler) {

 messageHandlers[handlerName] = handler;
}

额额额，是否似曾相识，在哪里曾见过它！！！

  1. native调用web端方法
 [self.jsBridge callHandler:@"OCCallJS"data:@"OC调用JS"responseCallback:^(idresponseData) {
 NSLog(@"currentThread:%@", [NSThreadcurrentThread]);
 NSLog(@"responseData:%@", responseData);
}];

//WebViewJavascriptBridge
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback {

[_base sendData:data responseCallback:responseCallback handlerName:handlerName];
}

//WebViewJavascriptBridgeBase
- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {

   NSMutableDictionary* message = [NSMutableDictionarydictionary];
   if(data) {
        message[@"data"] = data;
    }
   if(responseCallback) {
       NSString* callbackId = [NSStringstringWithFormat:@"objc_cb_%ld", ++_uniqueId];
       self.responseCallbacks[callbackId] = [responseCallbackcopy];
        message[@"callbackId"] = callbackId;
    }
   if(handlerName) {
        message[@"handlerName"] = handlerName;
    }
    [self _queueMessage:message];
}
- (void)_queueMessage:(WVJBMessage*)message {
    if (self.startupMessageQueue) {
        NSLog(@"！！！！！！！！startupMessageQueue addObject 执行了！！！！！！！！");
        [self.startupMessageQueue addObject:message];
    } else {
        [self _dispatchMessage:message];
    }
}

//执行js回调
- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    [self _log:@"SEND" json:messageJSON];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
    
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
    if ([[NSThread currentThread] isMainThread]) {
        [self _evaluateJavascript:javascriptCommand];

    } else {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [self _evaluateJavascript:javascriptCommand];
        });
    }
}

首先看下sendData里做了什么

  • 封装一个新的对象，增加key为data、handlerName、callbackId(有回调就生成该值)，并以callbackId的值为key，回调方法为value存入responseCallbacks中
新对象值为：
{
 callbackId = "objc_cb_1",
 data = "OC\U8c03\U7528JS",
 handlerName = "OCCallJS"
}

接着将新对象传入_queueMessage中，最终又回到了web端的_handlerMessageFromObjc方法中

function _handleMessageFromObjC(messageJSON) {
 _dispatchMessageFromObjC(messageJSON);
}
function _dispatchMessageFromObjC(messageJSON) {
    if (dispatchMessagesWithTimeoutSafety) {
        setTimeout(_doDispatchMessageFromObjC);
    } else {
         _doDispatchMessageFromObjC();
    }
    
    function _doDispatchMessageFromObjC() {
        var message = JSON.parse(messageJSON);
        var messageHandler;
        var responseCallback;

        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({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
                };
            }
            
            var handler = messageHandlers[message.handlerName];
            if (!handler) {
                console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
            } else {
                handler(message.data, responseCallback);
            }
        }
    }
}

这个方法是不是在哪里见过，原理与native端的flushMessageQueue是一样的！
不存在reponseId，存在callbackId，生成闭包responseCallback，闭包中内容为封装的新对象{ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData }传入_doSend，接着通过handlerName在messageHandlers中找到js端注册方法，并执行，方法执行中会执行responseCallback闭包，触发_doSend，将传入对象添加到sendMessageQueue中，并通过src=https://wvjb_queue_message向native发送消息，native截取到该消息，又会执行WKFlushMessageQueue流程，通过_fetchQueue获取sendMessageQueue中内容，执行flushMessageQueue方法，存在responseId，通过responseId在_responseCallbacks中取到回调，最终responseCallback(message[@"responseData"])执行回调，当然执行完也要删除_responseCallbacks中responseId为key的数据，最终完成交互

至此我们完成了WebViewJavascriptBridge框架的分析，大致整理下主要逻辑，以JS调用OC为例：

  1. 客户端注册方法
  2. js端将调用信息存入sendMessageQeuue中，
    并调用messageIframe.src = CUSTOM_PROTOCOL_SCHEME+’://‘+QUEUE_HAS_MESSAGE（https://wvjb_queue_message/）
  3. 客户端通过url拦截获取到调用信息
  4. 客户端生成一个新的回调，回调中存入callbackId，key为responseId，然后通过handlerName获取注册的方法，并执行，执行完成后在执行新的回调，回调web端方法
  5. web端通过传入的responseId进行js端回调

生活如此美好，今天就点到为止。。。

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