iOS 与 Web 互调

前提

苹果推出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 方法

ring*)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代码。

作者：carson6931
链接：https://www.jianshu.com/p/a07645a6169f
来源：简书
有兴趣交流的可以加下我QQ：1390842748