iOS中Objective-C与JavaScript之间相互调用的实现

原文地址：http://blog.csdn.net/zhaoxy_thu/article/details/22794201

最近在iOS项目中需要使用到oc与js之间的相互调用，而且要求是实现方式必须与Android中的相同，方便js中统一处理。于是在对第三方库WebViewJavascriptBridge进行研究之后，仿照Android中的WebView与JS的交互机制，实现了一个，在这里分享给大家。

首先要说明的是，在iOS中js调用Objective-C的代码只能通过重定向的形式进行，即js中通过修改iframe的src，或者直接跳转到一个url，在Objective-C中通过UIWebView的

webView:shouldStartLoadWithRequest:navigationType:方法拦截这个跳转，然后通过解析跳转的url获取js需要调用的方法名和参数。而在Android中，只需要调用WebView的addJavascriptInterface方法，将一个js对象绑定到一个java类，在类中实现相应的函数，当js需要调用java的方法时，只需要直接在js中通过绑定的对象调用相应的函数即可。

显然Android中js交互的方式要比iOS上方便得多，因此，我们可以在iOS上实现一套与Android相类似的机制。下面先说明一下实现的原理，要在js中直接通过绑定的对象调用相应的函数，那么就需要在js中添加相应的代码，但是为了确保与Android的一致性，js代码应该在客户端以注入的形式加入。所以，我们先实现一下需要注入的代码：

[Javascript] view plaincopy

1. ;(function() {  
2.     var messagingIframe,  
3.         bridge = 'external',  
4.         CUSTOM_PROTOCOL_SCHEME = 'jscall';  
5.     
6.     if (window[bridge]) { return }  
7.   
8.     function _createQueueReadyIframe(doc) {  
9.         messagingIframe = doc.createElement('iframe');  
10.         messagingIframe.style.display = 'none';  
11.         doc.documentElement.appendChild(messagingIframe);  
12.     }  
13.     window[bridge] = {};  
14.     var methods = [%@];  
15.     for (var i=0;i
16.         var method = methods[i];  
17.         var code = "(window[bridge])[method] = function " + method + "() {messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + ':' + arguments.callee.name + ':' + encodeURIComponent(JSON.stringify(arguments));}";  
18.         eval(code);  
19.     }  
20.     
21.     //创建iframe，必须在创建external之后，否则会出现死循环  
22.     _createQueueReadyIframe(document);  
23.     //通知js开始初始化  
24.     //initReady();  
25. })();  

在以上代码中，我们在网页中添加了一个iframe，使得改变iframe的src时webview可以捕捉到重定向请求，使用这种方式进行重定向，相比直接修改网页的url要安全得多。同时设置了一个external对象，并为该对象绑定了若干方法，具体的方法之后会添加，当这两个方法执行时，会修改iframe的src，并将要调用的方法和参数以url的形式来构造。然后，我们需要在webview完成网页加载的时候进行注入，实现以下委托：

[objc] view plaincopy

1. - (void)webViewDidFinishLoad:(UIWebView *)webView {  
2.     if (webView != _webView) { return; }  
3.     //is js insert  
4.     if (![[webView stringByEvaluatingJavascriptFromString:[NSString stringWithFormat:@"typeof window.%@ == 'object'", kBridgeName]] isEqualToString:@"true"]) {  
5.         //get class method dynamically  
6.         unsigned int methodCount = 0;  
7.         Method *methods = class_copyMethodList([self class], &methodCount);  
8.         NSMutableString *methodList = [NSMutableString string];  
9.         for (int i=0; i
10.             NSString *methodName = [NSString stringWithCString:sel_getName(method_getName(methods[i])) encoding:NSUTF8StringEncoding];  
11.             [methodList appendString:@"\""];  
12.             [methodList appendString:[methodName stringByReplacingOccurrencesOfString:@":" withString:@""]];  
13.             [methodList appendString:@"\","];  
14.         }  
15.         if (methodList.length>0) {  
16.             [methodList deleteCharactersInRange:NSMakeRange(methodList.length-1, 1)];  
17.         }  
18.           
19.         NSBundle *bundle = _resourceBundle ? _resourceBundle : [NSBundle mainBundle];  
20.         NSString *filePath = [bundle pathForResource:@"WebViewJsBridge" ofType:@"js"];  
21.         NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];  
22.         [webView stringByEvaluatingJavascriptFromString:[NSString stringWithFormat:js, methodList]];  
23.     }  
24.   
25.     __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;  
26.     if (strongDelegate && [strongDelegate respondsToSelector:@selector(webViewDidFinishLoad:)]) {  
27.         [strongDelegate webViewDidFinishLoad:webView];  
28.     }  
29. }  

该委托对加载完成的网页进行了js注入，将类中实现的方法添加到了js中。注意，以上代码在注入前需要判断是否已经注入，避免重复注入。接下来，我们可以再实现一个webview的委托来拦截重定向事件：

[objc] view plaincopy

1. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {  
2.     if (webView != _webView) { return YES; }  
3.     NSURL *url = [request URL];  
4.     __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;  
5.       
6.     NSString *requestString = [[request URL] absoluteString];  
7.     if ([requestString hasPrefix:kCustomProtocolScheme]) {  
8.         NSArray *components = [[url absoluteString] componentsSeparatedByString:@":"];  
9.           
10.         NSString *function = (NSString*)[components objectAtIndex:1];  
11.         NSString *argsAsString = [(NSString*)[components objectAtIndex:2]  
12.                                   stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];  
13.         NSData *argsData = [argsAsString dataUsingEncoding:NSUTF8StringEncoding];  
14.         NSDictionary *argsDic = (NSDictionary *)[NSJSONSerialization JSONObjectWithData:argsData options:kNilOptions error:NULL];  
15.         //convert js array to objc array  
16.         NSMutableArray *args = [NSMutableArray array];  
17.         for (int i=0; i<[argsDic count]; i++) {  
18.             [args addObject:[argsDic objectForKey:[NSString stringWithFormat:@"%d", i]]];  
19.         }  
20.         //ignore warning  
21. #pragma clang diagnostic ignored "-Warc-performSelector-leaks"  
22.         SEL selector = NSSelectorFromString([args count]>0?[function stringByAppendingString:@":"]:function);  
23.         if ([self respondsToSelector:selector]) {  
24.             [self performSelector:selector withObject:args];  
25.         }  
26.         return NO;  
27.     } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {  
28.         return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];  
29.     } else {  
30.         return YES;  
31.     }  
32. }  

以上代码中对重定向的url进行了判断，如果符合我们事先定义的协议，就进行解析，否则就进行跳转。解析的时候以冒号分隔，取出函数名和参数列表，并调用相应的方法。至此，我们就在iOS中实现了与Android相同的调用机制。

为了方便大家使用，我将以上代码封装成了一个类，具体的使用方法见Demo。

需要注意的是：

1. 在实际应用中可能出现js执行顺序的问题，如果网页中的js在注入前先获取绑定的对象进行保存，是无法获取到的，因为这时候待绑定的对象为空。这就需要网页中js的初始化在注入之后，因此在上文代码中有一个initReady方法。

2. 由于performSelector最多只能包含两个参数，因此例子中是通过数组来传递参数列表的。