Webview中JS和OC的通信--WebViewJavascr

webview的JS和OC的通信主要通过webview调用stringByEvaluatingJavaScriptFromString方法和OC调用webview的代理方法- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;实现。
WebViewJavascriptBridge也是通过调用者两个方法实现的JS和OC通信。

WebViewJavascriptBridge结构

WebViewJavascriptBridgeBase_h.png

因为iOS现在有UIWebview和WKWebview(iOS8.0启用)两种webview，所以这个库中有WebViewJavascriptBridge和WKWebViewJavascriptBridge两个对应的bridge。这两个bridge都是通过成为WebViewJavascriptBridgeBase的delegate，实现和WebViewJavascriptBridgeBase通信的。WebViewJavascriptBridge_JS是JS代码，在webview加载完成后通过stringByEvaluatingJavaScriptFromString方法注入这个类里面的JS方法。

代码分析

• 先看几个宏定义

#define kCustomProtocolScheme @"wvjbscheme"
#define kQueueHasMessage      @"__WVJB_QUEUE_MESSAGE__"
#define kBridgeLoaded         @"__BRIDGE_LOADED__"

OC是通过代理方法实现截获JS请求的。为了实现截获的真的是JS发送通信数据而不截获webview本身自己的网络请求。WebViewJavascriptBridge定义了以上的scheme。当发起网络请求时，通过判断是不是自己定义的scheme来决定需不需要拦截这次请求。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if (webView != _webView) { return YES; }
    NSURL *url = [request URL];
    __strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
    
    //先判断是不是kCustomProtocolScheme。如果是才拦截，不是则放过此请求
    if ([_base isCorrectProcotocolScheme:url]) {
    
            //判断是否是webview加载完成的url请求。如果是就执行注入JS代码的方法。
        if ([_base isBridgeLoadedURL:url]) {
            [_base injectJavascriptFile];
            
        //判断是否是需要处理的JS通信请求。
        } else if ([_base isQueueMessageURL:url]) {
            NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
            [_base flushMessageQueue:messageQueueString];
            
         //未知url，不处理
        } else {
            [_base logUnkownMessage:url];
        }
        return NO;
        
      //正常的webview网络请求。
    } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
        return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
    } else {
        return YES;
    }
}

• 另外需要注意的点是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];
        }
    }
}

如果在webview还没有加载完成时，OC就通过bridge对JS发起通信，这个时候通信是无法到达的。bridge的方法是先把这写请求存储在startupMessageQueue数组中，等到webview加载完成后再依次发送这些请求。并且把startupMessageQueue数组置为nil。这样下次再有OC的请求时就直接发送，不再缓存了。这是一个值得学习的设计思路。

• 对于JS，它是给DOM添加了一个iframe标签来实现调用bridge的。具体的方法是

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

这段代码必须要粘贴到自己的JS代码中，否则bride无法正常运行。

• 自己拼写JS代码在注入到webview前，有两点需要注意。一是特殊字符的转义，而是确保代码运行在主线程。这个bridge在_dispatchMessage方法中进行了处理。

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

通信过程

简单通信

没有回调的通信--OC给JS发消息
OC调用- (void)callHandler:(NSString*)handlerName data:(id)data;方法。这个方法会把handlerName和data包装成message。并通过stringByEvaluatingJavaScriptFromString方法发送给webview。webview会调用注入的JS方法_dispatchMessageFromObjC接收这次请求。然后调用回调方法var handler = messageHandlers[message.handlerName];处理这次请求，这个回调就是webview加载时注册的那个回调。

没有回调的通信--JS给OC发消息
JS调用bridge.callHandler()方法来给OC发送消息，callHandler方法是在webview加载完成后注入到webview的。callHandler方法又会调用_doSend方法，_doSend把要发送的数据包装成message进行发送。具体的发送动作是messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;通过给iframe重新设置src属性，就会触发webview重新请求新设置的src。此时webview的代理方法就会接收到这次请求，并按照设定的scheme判断是否截获这次请求。当截获到这次请求后，OC会调用WVJBHandler handler = self.messageHandlers[message[@"handlerName"]];这个回调处理请求，这个请求是OC设置bridge时注册的回调。这样JS就完成了给OC发消息的动作。

可以看到，OC和JS的互调很相似，两者都是先注册一个回调，在对方的请求到达时，调用这个回调。

有回调的通信比较复杂，不过说白了就是“互发消息”。
有回调的通信--OC调用JS

• OC在发送发送消息时会先把回调加载进responseCallbacks字典缓存。回调是value，key是callbackID（一个自增的long类型值++_uniqueId）。

• JS在收到消息（_dispatchMessageFromObjC被执行）时，会判断消息是否包含callbackID，如果有就把callbackID设置为返回消息的responseID字段。并定义回调responseCallback，这个新定义的回调在执行时会调用_doSend方法。

if (message.callbackId) {
                    var callbackResponseId = message.callbackId;
                    responseCallback = function(responseData) {
                        _doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
                    };
                }

• JS中调用注册时的回调，然后调用上面代码中定义的responseCallback，从而就会调用到里面的_doSend方法。这样JS就会把返回消息发送给OC。

• OC在收到消息后，会进行处理，先判断message是否有responseId，如果有就从responseCallbacks缓存中通过responseId查询到对应的回调，并调用这个回调。然后清除responseCallbacks的这个回调记录。此时JS返回给OC的消息就能被OC获取了。

整个调用过程结束。
其实这个调用过程就是OC先缓存一个回调，把消息发送给JS，JS获取到OC需要回调，调用一次发送消息把数据发送回给OC，OC判断接收的消息是回调、从缓存中取得回调并执行的过程。
JS调用OC的过程和上面的过程相似，只是JS需要先缓存回调，最后获取相应的回调并执行。这里不再具体分析。