通过WebViewJavascriptBridge实现OC与JS交互

 这里照搬Github的Demo，其实还是很易懂的，首先，要在控制器的.h文件当中实现浏览器控件的协议：

1 #import 2 3 @interface ExampleAppViewController : UINavigationController 4 5 @end

在.m方法当中，WebViewJavascriptBridge并没有直接复写代理方法，而是这样实现的：

 1 @interface ExampleAppViewController () 2 @property WebViewJavascriptBridge* bridge; 3 @end 4  5 @implementation ExampleAppViewController 6  7 //在页面显示出来之前，注册bridge对象 8 - (void)viewWillAppear:(BOOL)animated { 9     if (_bridge) { return; }10 11     UIWebView* webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];12     [self.view addSubview:webView];13 14     //开启调试信息15     [WebViewJavascriptBridge enableLogging];16     17     //响应JS通过send发送给OC的消息18     _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {19         NSLog(@"ObjC received message from JS: %@", data);20         responseCallback(@"Response for message from ObjC");21     }];22     23     //响应JS通过callhandler发送给OC的消息24     [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {25         NSLog(@"testObjcCallback called: %@", data);26         responseCallback(@"Response from testObjcCallback");27     }];28     29     [self renderButtons:webView];30     [self loadExamplePage:webView];31 }

这个框架定义了两种OC和JS之间通信的方式，一种是send，发送一条消息，另一种是通过一个key调用callHandler，注意上方红色的方法，这两个方法接收js返回回来的data并显示，之后调用那个了responseCallback方法，给js回发一条消息，也就是回调。

OC可以相应JS发来的消息，也可以主动给JS发消息，Demo当中提取了两个方法：

 1 //OC调用send给JS发消息 2 - (void)sendMessage:(id)sender { 3     [_bridge send:@"A string sent from ObjC to JS" responseCallback:^(id response) { 4         NSLog(@"sendMessage got response: %@", response); 5     }]; 6 } 7  8 //OC调用callHandler给JS发消息 9 - (void)callHandler:(id)sender {10     id data = @{ @"greetingFromObjC": @"Hi there, JS!" };11     [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {12         NSLog(@"testJavascriptHandler responded: %@", response);13     }];14 }

其中在JS端，可以有多个handler，所以callHandler需要一个key来寻找指定方法。responseCallback用于响应JS处理完毕后对OC的回调。

 

下面是JS端：

 JS的关键在于connectWebViewJavascriptBridge函数，log方法用于输出日志，是用户的自定义函数，所有的自定义函数都要写在connectWebViewJavascriptBridge当中作为成员。

bridge.init和bridge.registerHandler方法用于接收OC发来的send和callHandler，并对OC进行回调。

之后定义了两个按钮，通过上述两种方式直接调用OC，并处理OC回发的响应信息。