WebViewJavascriptBridge 原理解析

WebViewJavascriptBridge应该是当前最流行最成功的OC与Web交互实现了。最近看了一下他的实现原理

我们可以在OC中调用javascript方法，但是反过来不能在javascript中调用OC方法。所以WebViewJavascriptBridge的实现过程就是在OC环境和javascript环境各自保存一个相互调用的信息。每一个调用之间都有id和callbackid来找到两个环境对应的处理。


image.png

WebViewJavascriptBridge_JS.m文件中是javascript环境的bridge初始化和处理，里面负责接收oc发给javascript的消息，并且把javascript环境的消息发送给oc。
WebViewJavascriptBridge.m主要负责OC环境的消息处理，并且把OC环境的消息发送给javascript环境。
WebViewJavascriptBridgeBase.m主要实现了OC环境的bridge初始化和处理。
ExampleApp.html主要用于模拟生产环境下的web端。

初始化过程

1、OC环境初始化

我们从OC环境的初始化开始。

//初始化一个OC环境的桥WKWebViewJavascriptBridge并且初始化。

  • (instancetype)bridgeForWebView:(WKWebView)webView {
    WKWebViewJavascriptBridge     bridge = [[self alloc] init];
    //调用下面那个方法
    [bridge _setupInstance:webView];
    [bridge reset];
    return bridge;
    }
    //初始化
  • (void) _setupInstance:(WKWebView*)webView {
    _webView = webView;
    _webView.navigationDelegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
    }

//messageHandlers用于保存OC环境注册的方法，key是方法名，value是这个方法对应的回调block
//startupMessageQueue用于保存是实话过程中需要发送给javascirpt环境的消息。
//responseCallbacks用于保存OC于javascript环境相互调用的回调模块。通过_uniqueId加上时间戳来确定每个调用的回调。

  • (id)init {
    if (self = [super init]) {
    self.messageHandlers = [NSMutableDictionary dictionary];
    self.startupMessageQueue = [NSMutableArray array];
    self.responseCallbacks = [NSMutableDictionary dictionary];
    _uniqueId = 0;
    }
    return self;
    }
    所有与javascript之间交互的信息都存储在messageHandlers和responseCallbacks中。这两个属性记录了OC环境与javascript交互的信息。

2、OC环境注册方法

注册一个OC方法OC提供方法给JS调用给javascript调用，并且把他的回调实现保存在messageHandlers中。

[_bridge registerHandler:@"OC提供方法给JS调用" handler:^(id data, WVJBResponseCallback responseCallback) {
//NSLog(@"testObjcCallback called: %@", data);
responseCallback(@"OC发给JS的返回值");
}];

  • (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
    _base.messageHandlers[handlerName] = [handler copy];
    }
    3、Web环境初始化

加载Web环境的html,这里就是ExampleAPP.html文件,我删除了非关键部分。

function setupWebViewJavascriptBridge(callback) {
//第一次调用这个方法的时候，为false
if (window.WebViewJavascriptBridge) {
var result = callback(WebViewJavascriptBridge);
return result;
}
//第一次调用的时候，也是false
if (window.WVJBCallbacks) {
var result = window.WVJBCallbacks.push(callback);
return result;
}
//把callback对象赋值给对象。
window.WVJBCallbacks = [callback];
//这段代码的意思就是执行加载WebViewJavascriptBridge_JS.js中代码的作用
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);
}

//setupWebViewJavascriptBridge执行的时候传入的参数，这是一个方法。
function callback(bridge) {
var uniqueId = 1
//把WEB中要注册的方法注册到bridge里面
bridge.registerHandler('OC调用JS提供的方法', function(data, responseCallback) {
log('OC调用JS方法成功', data)
var responseData = { 'JS给OC调用的回调':'回调值!' }
log('OC调用JS的返回值', responseData)
responseCallback(responseData)
})
};
//驱动所有hander的初始化
setupWebViewJavascriptBridge(callback);
我们调用setupWebViewJavascriptBridge函数，并且这个函数传入的callback也是一个函数。callback函数中有我们在javascript环境中注册的OC调用JS提供的方法方法。setupWebViewJavascriptBridge的实现过程中我们可以发现，如果不是第一次初始化，会通过 window.WebViewJavascriptBridge或者window.WVJBCallbacks两个判断返回。

iframe可以理解为webview中的窗口，当我们改变iframe的src属性的时候，相当于我们浏览器实现了链接的跳转。比如从www.baidu.com跳转到www.google.com。下面这段代码的目的就是实现一个到https://bridge_loaded的跳转。从而达到初始化javascript环境的bridge的作用。

//这段代码的意思就是执行加载WebViewJavascriptBridge_JS.js中代码的作用
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);
我们知道只要webview有跳转，就会调用webview的代理方法。我们重点看下面这个代理方法。

  • (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if (webView != _webView) { return; }
    NSURL *url = navigationAction.request.URL;
    NSLog(@"点开URL%@",url);
    __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
    //如果是WebViewJavascriptBridge发送或者接受的消息，则特殊处理。否则按照正常流程处理。
    if ([_base isWebViewJavascriptBridgeURL:url]) {
    //1第一次注入JS代码
    if ([_base isBridgeLoadedURL:url]) {
    [_base injectJavascriptFile];
    //处理WEB发过来的消息
    } else if ([_base isQueueMessageURL:url]) {
    [self WKFlushMessageQueue];
    } else {
    [_base logUnkownMessage:url];
    }
    decisionHandler(WKNavigationActionPolicyCancel);
    }
    //下面是webview的正常代理执行流程，不用管。
    if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:decidePolicyForNavigationAction:decisionHandler:)]) {
    [_webViewDelegate webView:webView decidePolicyForNavigationAction:navigationAction decisionHandler:decisionHandler];
    } else {
    decisionHandler(WKNavigationActionPolicyAllow);
    }
    }
    在这段代码中，我们首先通过[_base isWebViewJavascriptBridgeURL:url]来判断是否是普通的跳转还是webViewjavascriptBridege的跳转。如果是bridge_loaded表示是初始化javascript环境的消息，如果是 wvjb_queue_message则表示是发送javascript消息。https://bridge_loaded显然是第一种消息。OC具体具体判断逻辑代码如下：

define kOldProtocolScheme @"wvjbscheme"

define kNewProtocolScheme @"https"

define kQueueHasMessage @"wvjb_queue_message"

define kBridgeLoaded @"bridge_loaded"

//是否是WebViewJavascriptBridge框架相关的链接

  • (BOOL)isWebViewJavascriptBridgeURL:(NSURL)url {
    if (![self isSchemeMatch:url]) {
    return NO;
    }
    BOOL result = [self isBridgeLoadedURL:url] || [self isQueueMessageURL:url];
    return result;
    }
    /
    是否是WebViewJavascriptBridge发送或者接受的消息
    */
  • (BOOL)isSchemeMatch:(NSURL)url {
    NSString     scheme = url.scheme.lowercaseString;
    BOOL result = [scheme isEqualToString:kNewProtocolScheme] || [scheme isEqualToString:kOldProtocolScheme];
    return result;
    }
    //是WebViewJavascriptBridge发送的消息还是WebViewJavascriptBridge的初始化消息。
  • (BOOL)isQueueMessageURL:(NSURL)url {
    NSString     host = url.host.lowercaseString;
    return [self isSchemeMatch:url] && [host isEqualToString:kQueueHasMessage];
    }
    //是否是https://bridge_loaded这种初始化加载消息
  • (BOOL)isBridgeLoadedURL:(NSURL)url {
    NSString     host = url.host.lowercaseString;
    BOOL result = [self isSchemeMatch:url] && [host isEqualToString:kBridgeLoaded];
    return result;
    }

接下来调用[_base injectJavascriptFile]方法，这个方法的作用就是把WebViewJavascriptBridge_JS.js中的方法注入到webview中并且执行，从而达到初始化javascript环境的brige的作用。

//初始化的是否注入WebViewJavascriptBridge_JS.js

  • (void)injectJavascriptFile {
    NSString js;
    //WebViewJavascriptBridge_JS.js文件内容其实就是WebViewJavascriptBridge_JS.m对应的内容，我只是把它整理方便阅读。
    if (true) {
    js = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"WebViewJavascriptBridge_JS.js" ofType:nil] encoding:NSUTF8StringEncoding error:nil];
    }else{
    js = WebViewJavascriptBridge_js();
    }
    //把javascript代码注入webview中执行,这里执行具体的注入操作。
    [self _evaluateJavascript:js];
    //如果javascript环境初始化完成以后，有startupMessageQueue消息。则立即发送消息。
    if (self.startupMessageQueue) {
    NSArray     queue = self.startupMessageQueue;
    self.startupMessageQueue = nil;
    for (id queuedMessage in queue) {
    [self _dispatchMessage:queuedMessage];
    }
    }
    }
    //把javascript代码写入webview
  • (NSString) _evaluateJavascript:(NSString)javascriptCommand {
    [_webView evaluateJavaScript:javascriptCommand completionHandler:nil];
    return NULL;
    }
    3、WebViewJavascriptBridge_JS.js解析

上面我们讲到了注入javascript方法到webview中。具体的代码就是WebViewJavascriptBridge_JS.js这个文件中的方法。我们通过分析这个文件的代码可以知道javascript环境的bridge是如何初始化的。

;(function() {
//如果已经初始化了，则返回。
if (window.WebViewJavascriptBridge) {
return;
}
if (!window.onerror) {
window.onerror = function(msg, url, line) {
console.log("WebViewJavascriptBridge: ERROR:" + msg + "@" + url + ":" + line);
}
}
//初始化一些属性。
var messagingIframe;
//用于存储消息列表
var sendMessageQueue = [];
//用于存储消息
var messageHandlers = {};
//通过下面两个协议组合来确定是否是特定的消息，然后拦击。
var CUSTOM_PROTOCOL_SCHEME = 'https';
var QUEUE_HAS_MESSAGE = 'wvjb_queue_message';
//oc调用js的回调
var responseCallbacks = {};
//消息对应的id
var uniqueId = 1;
//是否设置消息超时
var dispatchMessagesWithTimeoutSafety = true;
//web端注册一个消息方法
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler;
}
//web端调用一个OC注册的消息
function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
_doSend({ handlerName: handlerName, data: data }, responseCallback);
}
function disableJavscriptAlertBoxSafetyTimeout() {
dispatchMessagesWithTimeoutSafety = false;
}
//把消息转换成JSON字符串返回
function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
return messageQueueString;
}
//OC调用JS的入口方法
function _handleMessageFromObjC(messageJSON) {
_dispatchMessageFromObjC(messageJSON);
}

//初始化桥接对象，OC可以通过WebViewJavascriptBridge来调用JS里面的各种方法。
window.WebViewJavascriptBridge = {
    registerHandler: registerHandler,
    callHandler: callHandler,
    disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
    _fetchQueue: _fetchQueue,
    _handleMessageFromObjC: _handleMessageFromObjC
};


//处理从OC返回的消息。
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 });
                };
            }
            //获取JS注册的函数
            var handler = messageHandlers[message.handlerName];
            if (!handler) {
                console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
            } else {
                //调用JS中的对应函数处理
                handler(message.data, responseCallback);
            }
        }
    }
}
//把消息从JS发送到OC，执行具体的发送操作。
function _doSend(message, responseCallback) {
    if (responseCallback) {
        var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
        //存储消息的回调ID
        responseCallbacks[callbackId] = responseCallback;
        //把消息对应的回调ID和消息一起发送，以供消息返回以后使用。
        message['callbackId'] = callbackId;
    }
    //把消息放入消息列表
    sendMessageQueue.push(message);
    //下面这句话会出发JS对OC的调用
    //让webview执行跳转操作，从而可以在
    //webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 中拦截到JS发给OC的消息
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}


messagingIframe = document.createElement('iframe');
messagingIframe.style.display = 'none';
//messagingIframe.body.style.backgroundColor="#0000ff";
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
document.documentElement.appendChild(messagingIframe);


//注册_disableJavascriptAlertBoxSafetyTimeout方法，让OC可以关闭回调超时，默认是开启的。
registerHandler("_disableJavascriptAlertBoxSafetyTimeout", disableJavscriptAlertBoxSafetyTimeout);
//执行_callWVJBCallbacks方法
setTimeout(_callWVJBCallbacks, 0);

//初始化WEB中注册的方法。这个方法会把WEB中的hander注册到bridge中。
//下面的代码其实就是执行WEB中的callback函数。
function _callWVJBCallbacks() {
    var callbacks = window.WVJBCallbacks;
    delete window.WVJBCallbacks;
    for (var i = 0; i < callbacks.length; i++) {
        callbacks[i](WebViewJavascriptBridge);
    }
}

})();
其实我们发现整个js文件就是一个立即执行的javascript方法。

首先我们发现会初始化一个WebViewJavascriptBridge对象。并且这个对象是赋值给window对象，这里window对象可以理解为webview。所以说我们后面在OC环境中如果要调用js方法，就可以通过window.WebViewJavascriptBridge在加上具体方法来调用。
WebViewJavascriptBridge对象中有javascript环境注入的提供给OC调用的方法registerHandler，javascript调用OC环境方法的callHandler。
_fetchQueue这个方法的作用就是把javascript环境的方法序列化成JSON字符串，然后传入OC环境再转换。
_handleMessageFromObjC就是处理OC发给javascript环境的方法。
在这个文件中也初始化了一个iframe实现webview的url跳转功能，从而激发webview代理方法的调用。

messagingIframe = document.createElement('iframe');
messagingIframe.style.display = 'none';
//messagingIframe.body.style.backgroundColor="#0000ff";
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
document.documentElement.appendChild(messagingIframe);

上面的src就是https://wvjb_queue_message/。这个是javascript发送的OC的第一条消息，目的和上面OC环境的startupMessageQueue一样，就是在javascript环境初始化完成以后，把javascript要发送给OC的消息立即发送出去。

然后我们看文件的最后面有如下代码。这段代码的作用就是立即执行ExampleApp.html中的callback方法。callback中传入的bridge参数就是我们这里初始化的window.WebViewJavascriptBridge对象。

//执行_callWVJBCallbacks方法
setTimeout(_callWVJBCallbacks, 0);

//初始化WEB中注册的方法。这个方法会把WEB中的hander注册到bridge中。
//下面的代码其实就是执行WEB中的callback函数。
function _callWVJBCallbacks() {
    var callbacks = window.WVJBCallbacks;
    delete window.WVJBCallbacks;
    for (var i = 0; i < callbacks.length; i++) {
        callbacks[i](WebViewJavascriptBridge);
    }
}

直到这里，OC环境和javascript环境的bridege都建立完毕。OC和javascript环境都有一个bridge对象，这个对象都保存着注册的每个方法和回调，并且维护着各自的消息队列、回调id、requestId等一系列信息。

OC发消息给WEB

OC要调用javascript环境的方法，其实就是调用ExampleApp.html中的bridge.registerHandler注册的方法。

//点击按钮开始一个OC消息.ExampleWKWebViewController.m中一个方法开始。

  • (void)callHandler:(id)sender {
    id data = @{ @"OC调用JS方法": @"OC调用JS方法的参数" };
    [_bridge callHandler:@"OC调用JS提供的方法" data:data responseCallback:^(id response) {
    // NSLog(@"testJavascriptHandler responded: %@", response);
    }];
    }
    /*
    handerName:OC调用JS提供的方法
    data:{@"OC调用JS方法的参数":@"OC调用JS方法"}
    responseCallback:回调block
    */

  • (void)callHandler:(NSString *)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback {
    [_base sendData:data responseCallback:responseCallback handlerName:handlerName];
    }
    把所有信息存入一个名字为message的字典中。里面拼装好参数data、回调IDcallbackId、消息名字handlerName。具体如下：

  • (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString)handlerName {
    NSMutableDictionary     message = [NSMutableDictionary dictionary];

    if (data) {
    message[@"data"] = data;
    }

    if (responseCallback) {
    NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
    self.responseCallbacks[callbackId] = [responseCallback copy];
    message[@"callbackId"] = callbackId;
    }

    if (handlerName) {
    message[@"handlerName"] = handlerName;
    }
    [self _queueMessage:message];
    }
    把OC消息序列化、并且转化为javascript环境的格式。然后在主线程中调用_evaluateJavascript。

//把消息发送给WEB环境

  • (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];
    });
    }
    }
    具体注入的javascript字符串如下：

WebViewJavascriptBridge._handleMessageFromObjC('{"callbackId":"objc_cb_1","data":{"OC调用JS方法":"OC调用JS方法的参数"},"handlerName":"OC调用JS提供的方法"}');
其实就是通过javascript环境中的Bridge对象的_handleMessageFromObjC方法。下面我们去WebViewJavascriptBridege_JS.js中看_handleMessageFromObjC的处理过程。

//处理从OC返回的消息。
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 });
            };
        }
        //获取JS注册的函数
        var handler = messageHandlers[message.handlerName];
        if (!handler) {
            console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
        } else {
            //调用JS中的对应函数处理
            handler(message.data, responseCallback);
        }
    }
}

}

上面这段代码很容易理解，其实就是如果消息中有callbackId则表示是一个回调。直接调用_doSend方法把信息返回OC。否则就是Web环境主动调用OC的情况。此时把callbackID、handlerName、responseCallback封装进一个message对象中保存起来(其实你会发现和OC环境的bridge处理一样)。然后通过_doSend发消息发送到OC环境。下面我们看看_doSend的具体实现：

//把消息从JS发送到OC，执行具体的发送操作。
function doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb' + (uniqueId++) + '_' + new Date().getTime();
//存储消息的回调ID
responseCallbacks[callbackId] = responseCallback;
//把消息对应的回调ID和消息一起发送，以供消息返回以后使用。
message['callbackId'] = callbackId;
}
//把消息放入消息列表
sendMessageQueue.push(message);
//下面这句话会出发JS对OC的调用
//让webview执行跳转操作，从而可以在
//webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 中拦截到JS发给OC的消息
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}

其中最重要还是最后面的通过改变iframe的messagingIframe.src。从而触发webview的代理方法webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler从而在OC中处理javascript环境触发过来的回调。具体如下:

if ([_base isWebViewJavascriptBridgeURL:url]) {
//第一次注入JS代码
if ([_base isBridgeLoadedURL:url]) {
[_base injectJavascriptFile];
//处理WEB发过来的消息
} else if ([_base isQueueMessageURL:url]) {
[self WKFlushMessageQueue];
} else {
[_base logUnkownMessage:url];
}
decisionHandler(WKNavigationActionPolicyCancel);
}
这里会走[self WKFlushMessageQueue];方法。然后通过调用WebViewJavascriptBridge._fetchQueue()来获取javascript给OC的回调信息。

//获取WEB消息的JSON字符串

  • (NSString *)webViewJavascriptFetchQueyCommand {
    return @"WebViewJavascriptBridge._fetchQueue();";
    }
    ////把消息或者WEB回调从OC发送到OC
  • (void)WKFlushMessageQueue {
    NSString js = [_base webViewJavascriptFetchQueyCommand];
    [_webView evaluateJavaScript:js completionHandler:^(NSString     result, NSError* error) {
    if (error != nil) {
    NSLog(@"WebViewJavascriptBridge: WARNING: Error when trying to fetch data from WKWebView: %@", error);
    }
    //把消息或者WEB回调从OC发送到OC
    [_base flushMessageQueue:result];
    }];
    }

获取到javascript给OC的回调消息以后，然后把javascript的bridge返回的信息加工处理成OC环境的bridge能识别的信息。从而找到具体的实现执行。

//把从WEB发送的消息返回。然后在这里处理

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

    }
    }
    这里会调用handler方法，通过javascript传过来的responseId获取对应的WVJBResponseCallback。然后执行这个block。到这里从OC发送消息到javascript并且javascript返回消息给OC的流程走完了。

WEB发消息给OC

首先通过ExampleAPP.html中的bridge.callHandler方法，这里的bridge就是window.WebViewJavascriptBridge对象：

bridge.callHandler('OC提供方法给JS调用',params, function(response) {
log('JS调用OC的返回值', response)
})
接下来调用window.WebViewJavascriptBridge中的callHander方法

//web端调用一个OC注册的消息
function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
_doSend({ handlerName: handlerName, data: data }, responseCallback);
}
然后调用WebViewJavascriptBridge_JS.js中的方法执行具体的操作。具体就和OC调用javascript过程一样了，就不解释了。

//把消息从JS发送到OC，执行具体的发送操作。
function doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb' + (uniqueId++) + '_' + new Date().getTime();
//存储消息的回调ID
responseCallbacks[callbackId] = responseCallback;
//把消息对应的回调ID和消息一起发送，以供消息返回以后使用。
message['callbackId'] = callbackId;
}
//把消息放入消息列表
sendMessageQueue.push(message);
//下面这句话会出发JS对OC的调用
//让webview执行跳转操作，从而可以在
//webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 中拦截到JS发给OC的消息
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
总结

其实现在想想，原理很简单。

分别在OC环境和javascript环境都保存一个bridge对象，里面维持着requestId,callbackId,以及每个id对应的具体实现。
OC通过javascript环境的window.WebViewJavascriptBridge对象来找到具体的方法，然后执行。
javascript通过改变iframe的src来出发webview的代理方法webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler从而实现把javascript消息发送给OC这个功能。
其实这里只是解析了webview与OC交互的桥接问题，其他比如webview中的请求拦截、添加进度条、运营商劫持、如何组织交互规则等问题这里还没有涉及。这些在我们项目中运用，具体就不抽出来了。

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

推荐阅读更多精彩内容