阅读 25

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


关注下面的标签,发现更多相似文章
评论