iOS 与 Web 互调苹果推出 JSCore 以前，iOS 调用 JS 只能通过 WebView 执行 JSStrin

前提

苹果推出JSCore 以前，iOS 调用JS 只能通过WebView 执行JSString 来实现。而WebView 没法直接调用iOS，只能触发特定链接，让iOS在WebView代理方法中捕获到这特定链接，从而执行相应操作，间接实现WebView 调 iOS。

原理

// iOS 调 JS
[_webView stringByEvaluatingJavaScriptFromString:jsString];

// JS 调 iOS
1：
web 将href 改为特定值
2：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSURL *url = [request URL];
    if  (url == 特定值) {call method}
}

iOS7之后苹果推出JSCore，通过获取web上下文环境，实现了iOS可以直接调JS方法，同时iOS 也能将block 赋值给JS的方法，实现了JS调用iOS并传值。

// 获取JS上下文
 JSContext *jsContext;
-(void)webViewDidFinishLoad:(UIWebView *)webView {
    jsContext = [_webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}

// iOS 调 JS
JSValue *funcValue = jsContext[@"insertText"];
[funcValue callWithArguments:@[@"hello!!!!"]];

//JS 调 iOS
jsContext[@"callNative"] = ^(NSString*str){
 NSLog(str);
 };

三方库WebViewJavascriptBridge

当然了不用三方库，自己也是能实现，之所有在这介绍这个三方库，还是觉得这个库设计还是不错，值得学习。

结构:

iOS端用法:

iOS 端与 web端统一好handler 名。

初始化bridge

  _bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];

iOS call Web，iOS 端要做的

// iOS 端直接callHandler
  [_bridge callHandler:@"JSToDo" data:@{}];

Web call iOS ，iOS 端要做的

// 注册handler 等待被Web调用
  [_bridge registerHandler:@"OCToDo" handler:^(id data, WVJBResponseCallback responseCallback) {
      NSString *str = [NSString stringWithFormat:@"%@",data];
      UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"iOS alert" message:str preferredStyle:UIAlertControllerStyleAlert];
      UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"ok" style:UIAlertActionStyleDefault handler:nil];
      [alert addAction:okAction];
     [self presentViewController:alert animated:false completion:nil];

      responseCallback(@"iOS receive data");
  }];

用法对法iOS 端来说还是蛮简单的！当然这些仅仅靠iOS 端还不够，需要web 端配合，待分析了实现原理后再看web 端的工作。

关系、作用:

前面说过JSCore 以前 iOS调web 只能用webView 执行JSString， web 调 iOS 只能主动触发特定url 让iOS 端监听到，实现间接调用。那这个三方库的实现基础正是如此。只不过在代码层面通过“观察者模式”加以封装。

Class: WebViewJavascriptBridge
1、在初始化时成为webView 的真实代理

// 实例化
+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
    WebViewJavascriptBridge* bridge = [[self alloc] init];
    [bridge _platformSpecificSetup:webView];
    return bridge;
 }
// 成为代理、初始化WebVeiwJavascriptBridgeBase
 - (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
    _webView = webView;
    _webView.delegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
}
// 实现WebViewDelegate方法
...

2、暴露接口，提供callHandler、registerHandler 方法

  - (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;
  - (void)callHandler:(NSString*)handlerName;
  - (void)callHandler:(NSString*)handlerName data:(id)data;
  - (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;

3、监听Url变化

- (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;
  if ([_base isCorrectProcotocolScheme:url]) {
      if ([_base isBridgeLoadedURL:url]) {// wvjbscheme://__BRIDGE_LOADED__
          [_base injectJavascriptFile]; // 重点：注入JSBridge
      } else if ([_base isQueueMessageURL:url]) {
          NSString *messageQueueString = [self _evaluateJavascript:[_base  webViewJavascriptFetchQueyCommand]]; //从Web 页面获取JS 数据
          [_base flushMessageQueue:messageQueueString];  // 数据处理
      } else {
          [_base logUnkownMessage:url];
      }
      return NO;
  } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
      return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
  } else {
      return YES;
  }
}

主要就是提供接口、监听变化，具体实现都是交给WebViewJavascriptBridgeBase。

Class: WebViewJavascriptBridgeBase
给WebViewJavascript 类充当业务层，实现CallHandler、registerHandler。通过操控WebView 执行JSString以及监听WebView URL 变化实现iOS 与 Web交互。
1、 RegisterHandler

// 将handlerName 保存起来
  _base.messageHandlers[handlerName] = [handler copy];

2、CallHandler
message字段处理(需要回调时将responseCallback按唯一callbackId保存)—>message 转json字符串—>WebView 执行JSString

3、消息处理
messageString 转数组
遍历
处理：取每条消息，看是否有responseId，有则是iOS端调Web端之后所需要的回调。没有则就是Web主动调iOS所发送数据。

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

Class: WebViewJavascriptBridge_JS
一段字符串，同时也是真正的bridge，通过WebView 执行JSString 将全局变量WebViewJavascriptBridge放在Web 页面的JS 中。
```
```
 window.WebViewJavascriptBridge = {
   registerHandler: registerHandler,
   callHandler: callHandler,
   disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
   _fetchQueue: _fetchQueue,
   _handleMessageFromObjC: _handleMessageFromObjC
 };
```
``
不管Web页面怎么变，JSBridge 是不变的，仅仅提供几个交互的方法就够了，所以这一块被提取出来，以string 的形式存放在三方库的文件 WebViewJavascriptBridge_JS.m中，需要用时注入页面就行。这也是这个三方库架构设计很合理的地方。
Class: WKWebViewJavascriptBridge
跟WebViewJavascriptBridge功能类似，仅仅为WKWebView 做些特殊处理。

Web 端要做的

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

当然web端没有必要自己保存JSBridge，只是通过 “WVJBIframe.src = 'wvjbscheme://BRIDGE_LOADED'; ” 来触发iOS 端将JSBridge 注入页面。

如果需要被iOS 调用则registerHandler

   bridge.registerHandler('JSToDo', function(data, responseCallback) {
        var a = document.createElement("span");
        a.innerText = "hello !!!!";
        document.documentElement.appendChild(a);
            responseCallback(data)
     })

如果需要调iOS 则callHandler
```
  window.WebViewJavascriptBridge.callHandler('OCToDo',{name:'carson'}, function responseCallback(responseData) {
      console.log("JS received response:", responseData)
 })
```
前面说了web 不能主动调iOS, 那web callHandler 时也是只能触发一个特定url 请求，同时将数据放在页面上，iOS监听到url 则去获取页面数据。实现Web 调iOS。

总结

其实重点很少，也提了很多次，也就是WebView 执行JSString 实现调web, web 触发特定URL 让原生监听到，执行相应操作，实现web调iOS 。当然JSCore 出现之后就不再是这个原理了，比这直接很多，最前面的原理也提到了。
这个库也还是有很多值得学习的地方，包括观察者模式，web和原生都只管注册和调用就够了。还有将JSBridge 的抽象出来，放在三方库中，简化了很多web代码。