iOS 与 Web 互调

作者: 一意孤行的程序猿 | 来源:发表于2019-08-03 16:40 被阅读0次

    前提

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

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

    结构:

    image.png

    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代码。
    

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

    相关文章

      网友评论

        本文标题:iOS 与 Web 互调

        本文链接:https://www.haomeiwen.com/subject/xugjdctx.html