前端直接调用OC的native方法

  在ANDROID中，WebView控件有setJavaScriptEnable接口，这里大概的意思就是让客户端能够响应来自WebView的回调，还有一个接口是addJavaScriptInterface(obj, "external")，这个接口的大概意思是给obj开一个叫"external"的口子，这样前端通过window.external.func(param1,param2...)这样的方式就可以直接调用obj中名叫"func"的方法了。

    在IOS中，要想实现这样的WebView需要经过一段周章，下面开始简要说明一下前端能够调用到客户端的代码的基本原理：客户端不管是根据本地的html加载网页还是url动态加载网页，实际上都已经接管了网页上的源码，然而这个源码是用JavaScript写的，这种源码是不能直接对IOS的OC代码进行调用的，我们要做的就是这样的一个转换，让JS通过一个bridge间接调用OC。

    

;(function() {    var messagingIframe,        bridge = 'external',        CUSTOM_PROTOCOL_SCHEME = 'jscall';      if (window[bridge]) { return }function _createQueueReadyIframe(doc) {        messagingIframe = doc.createElement('iframe');messagingIframe.style.display = 'none';doc.documentElement.appendChild(messagingIframe);}window[bridge] = {};    var methods = [%@];    for (var i=0;i<methods.length;i++){        var method = methods[i];        var code = "(window[bridge])[method] = function " + method + "() {messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + ':' + arguments.callee.name + ':' + encodeURIComponent(JSON.stringify(arguments));}";        eval(code);    }      //创建iframe，必须在创建external之后，否则会出现死循环    _createQueueReadyIframe(document);    //通知js开始初始化    //initReady();})();

我们通常使用IOS的WebView控件都是通过实现shouldStartLoadWithRequest等相关代理来截获网页url变化这个通知，在url中通常就隐含了我们需要的参数，然而这种方式并不够人性化，前端要是能够直接通过函数调用的方法来call OC的native是比较合理的方式。

shouldStartLoadWithRequest什么时候会被调用?是否一定要url变化才会调用？

shouldStartLoadWithRequest不仅在url变化的时候调用，而且只要网页内容变化的时候也能调用

上面的JS代码

messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + ':' + arguments.callee.name + ':' + encodeURIComponent(JSON.stringify(arguments));

就是对网页内容进行改变，通过在webview中植入这样的代码，就可以调到shouldStartLoadWithRequest，shouldStartLoadWithRequest是OC的代码，这样就实现了从JS到OC的调用。和Java的反射有点类似。

接下来解决如何在webview中植入这样的代码

- (void)webViewDidFinishLoad:(UIWebView *)webView {    if (webView != _webView) { return; }    //is js insert    if (![[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"typeof window.%@ == 'object'", kBridgeName]] isEqualToString:@"true"]) {        //get class method dynamically        unsigned int methodCount = 0;        Method *methods = class_copyMethodList([self class], &methodCount);        NSMutableString *methodList = [NSMutableString string];        for (int i=0; i<methodCount; i++) {            NSString *methodName = [NSString stringWithCString:sel_getName(method_getName(methods[i])) encoding:NSUTF8StringEncoding];            //防止隐藏的系统方法名包含“.”导致js报错            if ([methodName rangeOfString:@"."].location!=NSNotFound) {                continue;            }            [methodList appendString:@"\""];            [methodList appendString:[methodName stringByReplacingOccurrencesOfString:@":" withString:@""]];            [methodList appendString:@"\","];        }        if (methodList.length>0) {            [methodList deleteCharactersInRange:NSMakeRange(methodList.length-1, 1)];        }        free(methods);        NSBundle *bundle = _resourceBundle ? _resourceBundle : [NSBundle mainBundle];        NSString *filePath = [bundle pathForResource:@"WebViewJsBridge" ofType:@"js"];        NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];        [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:js, methodList]];    }}

webViewDidFinishLoad这个代理在webview加载完成后调用。

stringByEvaluatingJavaScriptFromString

相当于在webview的尾部追加一段代码，这里不仅追加进去了js代码，还有本地的函数列表，也就是OC暴露给前端可以调用的函数列表，当我们点击webview中的某个按钮触发前端执行了window.external.func(param1, param2)这样的代码，而这个代码因为我们注入了上面那段JS代码，不仅触发了shouldStartLoadWithRequest的执行，还把前端调用的函数名和参数传了回来，接下来就是在shouldStartLoadWithRequest中对这些参数进行整合，变成OC可以识别的代码，就能够正确调用到OC的native方法了

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {    if (webView != _webView) { return YES; }    NSURL *url = [request URL];        NSString *requestString = [[request URL] absoluteString];    if ([requestString hasPrefix:kCustomProtocolScheme]) {        NSArray *components = [[url absoluteString] componentsSeparatedByString:@":"];                NSString *function = (NSString*)[components objectAtIndex:1];        NSString *argsAsString = [(NSString*)[components objectAtIndex:2]                                  stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];        NSData *argsData = [argsAsString dataUsingEncoding:NSUTF8StringEncoding];        NSDictionary *argsDic = (NSDictionary *)[NSJSONSerialization JSONObjectWithData:argsData options:kNilOptions error:NULL];        //convert js array to objc array        NSMutableArray *args = [NSMutableArray array];        for (int i=0; i<[argsDic count]; i++) {            [args addObject:[argsDic objectForKey:[NSString stringWithFormat:@"%d", i]]];        }        //ignore warning#pragma clang diagnostic ignored "-Warc-performSelector-leaks"        SEL selector = NSSelectorFromString([args count]>0?[function stringByAppendingString:@":"]:function);        if ([self respondsToSelector:selector]) {            [self performSelector:selector withObject:args];        }        return NO;    }else {        return YES;    }

这里的request和真实的url改变带回来的参数组成不太一样，这个值是在JS代码中拼接的，所以这里解析也要按照那个规则逆向解析，后面用到了selector，将函数名function转换成selector，在run-time时就会调到了那个OC中的同名函数了

- (void)writeTopic:(NSArray *)params{    NSLog(@"writeTopic called");}

这里整合成一个参数，params数组，可以通过objectAtIndex来取出每个参数，进行后面的相关操作。

总结：

1 通过注入JS代码到webview

2 注入的JS代码在能改变webview的内容，实现网页的跳转(这里用的是一个空白的什么都没有的不可见的网页)

3 根据注入的JS中的规则在shouldStartLoadWithRequest中反向解析，并通过SEL动态调用。

前端直接调用OC的native方法