iOS 使用UIWebView把oc代码和javascript相关联
首先请参看一篇文章，作者写的很明白，请参看原地址 http://blog.163.com/m_note/blog/static/208197045201293015844274/。
其实，oc和js的交互涉及的就是UIWebview的2个最主要的方法，stringByEvaluatingJavaScriptFromString: 和- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType 。第一个方法的主要功能是注入和执行javascript，具体是注入还是执行，要看你参照中的string的格式，被用来从oc调用js。第二个方法的主要是根据请求的url进行分析，做出响应的处理，被用来从js调用oc。
下面我们分析一下WebViewJavascriptBridge工程，请到github上下载这个工程，注意阅读其中的readme文档！
关于这个工程，这里的bridge是以oc的角度命名方法的，比如这里的send，就是指利用oc代码调用javascript代码，而receive就是指javascript代码调用oc代码。这里的方法命名，log输出都是用的这个规则。知道了这个规则，方便理解代码和log。
ios的demo截图如下，共有4个按钮，上边2个是html中的按钮，下面2个是xib中的按钮，上面的按钮是为了演示js调用oc，下面的是为了演示oc调用js。
第一个按钮的演示的是：js发送data到oc，并调用oc中的默认处理方法处理data，处理完成后，oc回调一个js方法。
第二个按钮演示的是：js发送data到oc，并调用指定名称的oc方法去处理data，处理完成后，oc回调一个js方法。
第三个，和第四个的作用和上边的差不多，只不过是从oc向js发送。
我们看一下“点击左上按钮”这个操作的流程，了解一下实现细节。
a 首先是js方面的处理
调用按钮的onclick方法
button.onclick = function(e) { e.preventDefault() var data = 'Hello from JS button' log('JS sending message', data) bridge.send(data, function(responseData) { log('JS got response', responseData) }) }
send 方法如下
function send(data, responseCallback) { _doSend({ data:data }, responseCallback) }
_doSend方法如下
function _doSend(message, responseCallback) { if (responseCallback) { var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime() responseCallbacks[callbackId] = responseCallback message['callbackId'] = callbackId } sendMessageQueue.push(message) messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE }
这段代码需要分析一下，
responseCallbacks是一个map，负责把函数对象responseCallback和callbackId向关联。
message在传入的时候已经包含了data条目，这里又为它添加了callbackId条目，这样一条信息发送数据和回掉方法都被记录到了message中。
之后系统调用了sendMessageQueue.push(message)向数组加入message。
最后，系统更改iframe元素的src属性，这会导致UIWebView调用代理方法- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType。这样就可以调用相应的oc方法了。
b oc的任务开始了
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { if (webView != _webView) { return YES; } NSURL *url = [request URL]; NSLog(@"shouldStartLoadWithRequest url is %@",url); __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate; if ([[url scheme] isEqualToString:kCustomProtocolScheme]) { if ([[url host] isEqualToString:kQueueHasMessage]) { [self _flushMessageQueue]; } else { NSLog(@"WebViewJavascriptBridge: WARNING: Received unknown WebViewJavascriptBridge command %@://%@", kCustomProtocolScheme, [url path]); }
//注意这里的NO，这样就不会导致WebView加载数据了！因为我们发送的路径根本不是一个有内容的路径 return NO; } else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) { return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType]; } else { return YES; } }
系统首先检查是不是自己发出的请求，检查方法是查url的scheme，这里是 wvjbscheme 字符串，之后又检查了主机名是不是 __WVJB_QUEUE_MESSAGE__ 字符串。其实这里就属于个人定制部分了，因为这里仅仅是个demo，你可以添加更多的 hostname，去定义更多的处理方法。
之后系统调用_flushMessageQueue方法
这里的WVJBResponseCallback函数代表oc调用js后的回调函数。
系统首先通过执行js，获得到了当前在js中保存的sendMessageQueue，之后对数组中的每条message分别处理。
//主要作用就是取得在js中保存messageQueue，并做出操作 - (void)_flushMessageQueue { NSString *messageQueueString = [_webView stringByEvaluatingJavaScriptFromString:@"WebViewJavascriptBridge._fetchQueue();"]; id messages = [self _deserializeMessageJSON:messageQueueString]; if (![messages isKindOfClass:[NSArray class]]) { NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [messages class], messages); return; } for (WVJBMessage* message in messages) { if (![message isKindOfClass:[WVJBMessage class]]) { NSLog(@"WebViewJavascriptBridge: WARNING: Invalid %@ received: %@", [message class], message); continue; } [self _log:@"RCVD" json:message]; //检查message字典中是否存在responseId条目，如果存在，那么这条message是js收到oc的调用后，返回的响应消息，这条消息会调用指定的oc回调函数，处理比较简单；如果不存在，那么这是一条js发出的消息，处理比较复杂。 NSString* responseId = message[@"responseId"]; if (responseId) { WVJBResponseCallback responseCallback = _responseCallbacks[responseId]; responseCallback(message[@"responseData"]); [_responseCallbacks removeObjectForKey:responseId]; } else { WVJBResponseCallback responseCallback = NULL; //callbackId 代表了js的回掉函数，因此，如果存在这个条目，那么oc应该负责发送一条message，去调用js的这个回掉函数，如果不存在那么就不必操作了。 NSString* callbackId = message[@"callbackId"]; if (callbackId) { responseCallback = ^(id responseData) { WVJBMessage* msg = @{ @"responseId":callbackId, @"responseData":responseData }; [self _queueMessage:msg]; }; } else { responseCallback = ^(id ignoreResponseData) { // Do nothing }; } //handlerName 代表js要条用的oc的方法名称，如果存在，那么数据和回掉方法都要由oc中的handler处理；如果不存在，那么系统用创建bridge时传入的handle处理。 WVJBHandler handler; if (message[@"handlerName"]) { handler = _messageHandlers[message[@"handlerName"]]; //没有注册相应的handler if (!handler) { NSLog(@"WVJB Warning: No handler for %@", message[@"handlerName"]); return responseCallback(@{}); } } else { handler = _messageHandler; } @try { id data = message[@"data"]; handler(data, responseCallback); } @catch (NSException *exception) { NSLog(@"WebViewJavascriptBridge: WARNING: objc handler threw. %@ %@", message, exception); } } } }
系统每处理一条message，就打印出类似于下边的log
WVJB RCVD: {"data":"Hello from JS button","callbackId":"cb_2_1394094418895"}
在js中其实又2个数组保存message，一个是sendMessageQueue代表js向oc发出的消息，另一个是receiveMessageQueue代表oc向js发出的消息。
在oc中只有一个_startupMessageQueue保存message，这些message都是oc向js发送的消息，而js向oc发送的消息，都是通过调用- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType方法进行的，这样就不需要把消息再保存一遍了。
为什么不需要再保存呢？这里就涉及到另一个问题，为什么需要messageQueue呢？我对messageQueue的理解是，不能够或者不方便立即对message做出处理。例如 oc中的这个
_startupMessageQueue，我们看看程序启动时的log
2014-03-07 11:27:14.288 ExampleApp-iOS[26442:a0b] shouldStartLoadWithRequest url is about:blank 2014-03-07 11:27:14.289 ExampleApp-iOS[26442:a0b] webViewDidStartLoad 2014-03-07 11:27:14.319 ExampleApp-iOS[26442:a0b] webViewDidFinishLoad....... 2014-03-07 11:27:14.321 ExampleApp-iOS[26442:a0b] go on 2014-03-07 11:27:14.327 ExampleApp-iOS[26442:a0b] shouldStartLoadWithRequest url is about:blank 2014-03-07 11:27:14.329 ExampleApp-iOS[26442:a0b] webViewDidStartLoad 2014-03-07 11:27:14.331 ExampleApp-iOS[26442:a0b] webViewDidFinishLoad....... 2014-03-07 11:27:14.332 ExampleApp-iOS[26442:a0b] go on 2014-03-07 11:27:14.332 ExampleApp-iOS[26442:a0b] bigger than one!!!!------------3 2014-03-07 11:27:14.333 ExampleApp-iOS[26442:a0b] _dispatchMessage : { callbackId = "objc_cb_1"; data = "A string sent from ObjC before Webview has loaded."; } 2014-03-07 11:27:14.333 ExampleApp-iOS[26442:a0b] WVJB SEND: {"data":"A string sent from ObjC before Webview has loaded.","callbackId":"objc_cb_1"} 2014-03-07 11:27:14.334 ExampleApp-iOS[26442:a0b] javascript command is WebViewJavascriptBridge._handleMessageFromObjC('{\"data\":\"A string sent from ObjC before Webview has loaded.\",\"callbackId\":\"objc_cb_1\"}'); 2014-03-07 11:27:14.335 ExampleApp-iOS[26442:a0b] _dispatchMessage : { data = { foo = "before ready"; }; handlerName = testJavascriptHandler; } 2014-03-07 11:27:14.335 ExampleApp-iOS[26442:a0b] WVJB SEND: {"data":{"foo":"before ready"},"handlerName":"testJavascriptHandler"} 2014-03-07 11:27:14.336 ExampleApp-iOS[26442:a0b] javascript command is WebViewJavascriptBridge._handleMessageFromObjC('{\"data\":{\"foo\":\"before ready\"},\"handlerName\":\"testJavascriptHandler\"}'); 2014-03-07 11:27:14.336 ExampleApp-iOS[26442:a0b] _dispatchMessage : { data = "A string sent from ObjC after Webview has loaded."; } 2014-03-07 11:27:14.337 ExampleApp-iOS[26442:a0b] WVJB SEND: {"data":"A string sent from ObjC after Webview has loaded."} 2014-03-07 11:27:14.337 ExampleApp-iOS[26442:a0b] javascript command is WebViewJavascriptBridge._handleMessageFromObjC('{\"data\":\"A string sent from ObjC after Webview has loaded.\"}');
结合log，我们再看看启动代码
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"testObjcCallback called: %@", data); responseCallback(@"Response from testObjcCallback"); }]; [_bridge send:@"A string sent from ObjC before Webview has loaded." responseCallback:^(id responseData) { NSLog(@"objc got response! %@", responseData); }]; [_bridge callHandler:@"testJavascriptHandler" data:@{ @"foo":@"before ready" }]; [self renderButtons:webView]; //webview 载入内容 [self loadExamplePage:webView]; [_bridge send:@"A string sent from ObjC after Webview has loaded."];
注意到了吗，在webView载入代码之前，我们就可以发送消息了！但这时候webview没载入内容，当然不能响应我们的message了！所以我们要先把它们缓存起来，等待webViewDidFinishLoad后才能执行所需要的代码。
另外从log中看出，webViewDidFinishLoad是可能执行多次的，（原因是什么呢？） 为了保证messageQueue不被多次执行，需要在执行后把queue设置为nil
- (void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"webViewDidFinishLoad......."); if (webView != _webView) { return; } _numRequestsLoading--; if (_numRequestsLoading == 0 && ![[webView stringByEvaluatingJavaScriptFromString:@"typeof WebViewJavascriptBridge == 'object'"] isEqualToString:@"true"]) { NSBundle *bundle = _resourceBundle ? _resourceBundle : [NSBundle mainBundle]; NSString *filePath = [bundle pathForResource:@"WebViewJavascriptBridge.js" ofType:@"txt"]; NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil]; [webView stringByEvaluatingJavaScriptFromString:js]; } if (_startupMessageQueue) { if([_startupMessageQueue count]>1) NSLog(@"bigger than one!!!!------------%d",[_startupMessageQueue count]); for (id queuedMessage in _startupMessageQueue) { [self _dispatchMessage:queuedMessage]; } _startupMessageQueue = nil; } __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate; if (strongDelegate && [strongDelegate respondsToSelector:@selector(webViewDidFinishLoad:)]) { [strongDelegate webViewDidFinishLoad:webView]; } }
