WebViewJavascriptBridge 原理

官方demo 交互流程

1.webview 加载 ExampleApp.html

 // ExampleApp.html 中的js代码 function setupWebViewJavascriptBridge(callback) { 
    if (window.WebViewJavascriptBridge) { 
    return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { 
    return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; //创建iframe 梦开始的地方 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) } 

2.创建 一个 iframe 来触发 原生webView的代理方法,即:

// UIWebView - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { 
   } //WKWebView - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { 
   } 

上述两个代理方法调用的核心方法如下:

 //判断是否是自己的声明的scheme if ([_base isWebViewJavascriptBridgeURL:url]) { 
    //是否是 'https://__bridge_loaded__' 这个类型的url //如果是 就去加载 WebViewJavascriptBridge_JS.m 中的js代码 if ([_base isBridgeLoadedURL:url]) { 
    [_base injectJavascriptFile]; } else if ([_base isQueueMessageURL:url]) { 
    NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]]; [_base flushMessageQueue:messageQueueString]; } else { 
    [_base logUnkownMessage:url]; } return NO; } 

到此为止是为了把WebViewJavascriptBridge_JS.m 中的js代码注入Dom中

Native call js

- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName { 
     NSMutableDictionary* message = [NSMutableDictionary dictionary]; if (data) { 
     message[@"data"] = data; } //如果有回调 生成一个callbackId存到message里,并把回调存到全局变量responseCallbacks if (responseCallback) { 
     NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId]; self.responseCallbacks[callbackId] = [responseCallback copy]; message[@"callbackId"] = callbackId; } } // oc调用网页js方法 是通过WebViewJavascriptBridge._handleMessageFromObjC('%@') // 给js传了一段json  - (void)_dispatchMessage:(WVJBMessage*)message { 
     NSString *messageJSON = [self _serializeMessage:message pretty:NO]; ... NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON]; //主线程调用 [self _evaluateJavascript:javascriptCommand]; } 

再看 _handleMessageFromObjC()的实现

//处理来自oc发过来的message(json) function _doDispatchMessageFromObjC() { 
     //解析oc传过来的json var message = JSON.parse(messageJSON); var messageHandler; var responseCallback; //js调用oc oc有回调 if (message.responseId) { 
     responseCallback = responseCallbacks[message.responseId]; if (!responseCallback) { 
     return; } responseCallback(message.responseData); delete responseCallbacks[message.responseId]; } else { 
     //oc调用js js有回调 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 { 
     //调用已在 messageHandlers中注册的方法, 回调给responseCallback->_doSend //_doSend 即js调用oc  handler(message.data, responseCallback); } } } 

js call oc

调用流程: WebViewJavascriptBridge.callHandler() -> _doSend()

 function callHandler(handlerName, data, responseCallback) { 
      if (arguments.length == 2 && typeof data == 'function') { 
      responseCallback = data; data = null; } _doSend({ 
      handlerName:handlerName, data:data }, responseCallback); } // 把js调用oc的参数 封装成message对象 并把回调保存起来 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; } 

到这又开始触发到oc webview的代理回调里去了,即这块代码:

if ([_base isWebViewJavascriptBridgeURL:url]) { 
      if ([_base isBridgeLoadedURL:url]) { 
      [_base injectJavascriptFile]; } else if ([_base isQueueMessageURL:url]) { 
      //这次是走的这, 去调用js WebViewJavascriptBridge._fetchQueue(); // 取到刚刚push到sendMessageQueue 里的json NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]]; //处理js传过来的参数 如果有 callbackId 就说明js调oc的时候 oc是有回调的 [_base flushMessageQueue:messageQueueString]; } else { 
      [_base logUnkownMessage:url]; } return NO; } 

至此整个调用流程就走通了 O(∩_∩)O哈哈~