iOS开发WebViewJavascriptBridge通讯原理解析

    WKWebView* webView = [[NSClassFromString(@"WKWebView") alloc] initWithFrame:self.view.bounds];
    webView.navigationDelegate = self;
    [self.view addSubview:webView];
    // 开启打印
    [WebViewJavascriptBridge enableLogging];
    // 创建bridge对象
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
    // 设置代理
    [_bridge setWebViewDelegate:self];

    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"JSBridgeDemoApp" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [webView loadHTMLString:appHtml baseURL:baseURL];

function setupWebViewJavascriptBridge(callback) {
// 第一次调用这个方法的时候，为false
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
// 第一次调用的时候，为false
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
// 把callback对象赋值给对象
    window.WVJBCallbacks = [callback];
// 加载WebViewJavascriptBridge_JS中的代码
// 相当于实现了一个到https://__bridge_loaded__的跳转
    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)
    }
// 驱动所有hander的初始化
setupWebViewJavascriptBridge(function(bridge) {
...
}

// 只要webview有跳转，就会调用webview的这个代理方法
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if (webView != _webView) { return; }
    NSURL *url = navigationAction.request.URL;
    __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;
    // 如果是WebViewJavascriptBridge发送或者接收消息，则特殊处理。否则按照正常流程处理
    if ([_base isWebViewJavascriptBridgeURL:url]) {
        if ([_base isBridgeLoadedURL:url]) {
            // 是否是 https://__bridge_loaded__ 这种初始化加载消息
            [_base injectJavascriptFile];
        } else if ([_base isQueueMessageURL:url]) {
            // https://__wvjb_queue_message__
            // 处理WEB发过来的消息
            [self WKFlushMessageQueue];
        } else {
            [_base logUnkownMessage:url];
        }
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    // webview的正常代理执行流程
...

// 将WebViewJavascriptBrige_JS中的方法注入到webview中并且执行
- (void)injectJavascriptFile {
    NSString *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];
        }
    }
}

// 初始化Bridge对象，OC可以通过WebViewJavascriptBridge来调用JS里面的各种方法
window.WebViewJavascriptBridge = {
    registerHandler: registerHandler, // JS中注册方法
    callHandler: callHandler, // JS中调用OC的方法
    disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
    _fetchQueue: _fetchQueue, // 把消息转换成JSON串
    _handleMessageFromObjC: _handleMessageFromObjC // OC调用JS的入口方法
};

id data = @{ @"dataFromOC": @"aaaa!" };
    [_bridge callHandler:@"OCToJSHandler" data:data responseCallback:^(id response) {
        NSLog(@"JS回调的数据是：%@", response);
    }];

    // 注册事件（h5调App）
    [_bridge registerHandler:@"JSTOOCCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"JSTOOCCallback called: %@", data);
        responseCallback(@"Response from JSTOOCCallback");
    }];

bridge.registerHandler('OCToJSHandler', function(data, responseCallback) {
    ...
})

// web端注册一个消息方法，将注册的方法存储起来
function registerHandler(handlerName, handler) {
    messageHandlers[handlerName] = handler;
}

id data = @{ @"dataFromOC": @"aaaa!" };
[_bridge callHandler:@"OCToJSHandler" data:data responseCallback:^(id response) {
    NSLog(@"JS回调的数据是：%@", response);
}];

// 所有信息存入字典
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消息序列化、并且转化为JS环境的格式，然后在主线程中调用_evaluateJavascript
- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
    [self _evaluateJavascript:javascriptCommand];
}

function _doDispatchMessageFromObjC() {
// 解析发送过来的JSON
    var message = JSON.parse(messageJSON);
    var messageHandler;
    var responseCallback;
    // 主动调用
    // 如果有callbackid
    if (message.callbackId) {
    // 将callbackid当做callbackResponseId再返回回去
        var callbackResponseId = message.callbackId;
        responseCallback = function(responseData) {
        // 把消息从JS发送到OC，执行具体的发送操作
            _doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
            };
        // 获取JS注册的函数，取出消息里的handlerName
        var handler = messageHandlers[message.handlerName];
        // 调用JS中的对应函数处理
        handler(message.data, responseCallback);
            }
    }

bridge.registerHandler('OCToJSHandler', function(data, responseCallback) {
    // OC中传过来的数据
    log('从OC传过来的数据是：', data)
    // JS返回数据
    var responseData = { 'dataFromJS':'bbbb!' }
    responseCallback(responseData)
})

responseCallback = function(responseData) {
    // 把消息从JS发送到OC，执行具体的发送操作
    _doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};

// 把消息从JS发送到OC，执行具体的发送操作
    function _doSend(message, responseCallback) {
    // 把消息放入消息列表
    sendMessageQueue.push(message);
    // 发出js对oc的调用，让webview执行跳转操作，可以在decidePolicyForNavigationAction:中拦截到js发给oc的消息
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
    }

[_bridge registerHandler:@"JSTOOCCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
    responseCallback(@"Response from JSTOOCCallback");
}];

// 调用oc中注册的那个方法
bridge.callHandler('JSTOOCCallback', {'foo': 'bar'}, function(response) {
    log('JS 取到的回调是：', response)
})

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"]];
handler(message[@"data"], responseCallback);