通过WebViewJavascriptBridge实现OC与JS交互

浏览数：131 / 时间：2015年06月08日

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

1 #import <UIKit/UIKit.h>
2 
3 @interface ExampleAppViewController : UINavigationController <UIWebViewDelegate>
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端：

 1 <!doctype html>
 2 <html><head>
 3     <style type=‘text/css‘>
 4         html { font-family:Helvetica; color:#222; }
 5         h1 { color:steelblue; font-size:24px; margin-top:24px; }
 6         button { margin:0 3px 10px; font-size:12px; }
 7         .logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
 8     </style>
 9 </head><body>
10 <h1>WebViewJavascriptBridge Demo</h1>
11 <script>
12     window.onerror = function(err) {
13         log(‘window.onerror: ‘ + err)
14     }
15 
16     //用于创建桥接对象的函数
17     function connectWebViewJavascriptBridge(callback) {
18         //如果桥接对象已存在，则直接调用callback函数
19         if (window.WebViewJavascriptBridge) {
20             callback(WebViewJavascriptBridge)
21         }
22         //否则添加一个监听器来执行callback函数
23         else {
24             document.addEventListener(‘WebViewJavascriptBridgeReady‘, function() {
25                 callback(WebViewJavascriptBridge)
26             }, false)
27         }
28     }
29 
30     //页面加载后，立刻调用创建桥接对象的函数
31     connectWebViewJavascriptBridge(function(bridge) {
32         //用户自定义的函数都要写在这里
33         //这里由用户自定义了一个函数，用来写日志到UI，也就是一个普通的js函数
34         var uniqueId = 1
35         function log(message, data) {
36             var log = document.getElementById(‘log‘)
37             var el = document.createElement(‘div‘)
38             el.className = ‘logLine‘
39             el.innerHTML = uniqueId++ + ‘. ‘ + message + ‘:<br/>‘ + JSON.stringify(data)
40             if (log.children.length) { log.insertBefore(el, log.children[0]) }
41             else { log.appendChild(el) }
42         }
43 
44         //这个方法用于js接收oc发来的send，并使用responseCallback方法给OC回发消息
45         bridge.init(function(message, responseCallback) {
46             log(‘JS got a message‘, message)
47             var data = { ‘Javascript Responds‘:‘Wee!‘ }
48             log(‘JS responding with‘, data)
49             responseCallback(data)
50         })
51 
52         //这个方法用于js接收oc的callHandler，handler用一个key标记，可以注册多个handler
53         bridge.registerHandler(‘testJavascriptHandler‘, function(data, responseCallback) {
54             log(‘ObjC called testJavascriptHandler with‘, data)
55             var responseData = { ‘Javascript Says‘:‘Right back atcha!‘ }
56             log(‘JS responding with‘, responseData)
57             responseCallback(responseData)
58         })
59 
60         //添加js给oc发消息的按钮
61         var button = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))
62         button.innerHTML = ‘Send message to ObjC‘
63         button.onclick = function(e) {
64             e.preventDefault()
65             var data = ‘Hello from JS button‘
66             log(‘JS sending message‘, data)
67             //调用桥接对象的send方法给oc发消息，第二个参数（函数）是oc对js的返回
68             bridge.send(data, function(responseData) {
69                 log(‘JS got response‘, responseData)
70             })
71         }
72 
73         document.body.appendChild(document.createElement(‘br‘))
74 
75         //添加js调用oc方法的测试按钮
76         var callbackButton = document.getElementById(‘buttons‘).appendChild(document.createElement(‘button‘))
77         callbackButton.innerHTML = ‘Fire testObjcCallback‘
78         callbackButton.onclick = function(e) {
79             e.preventDefault()
80             log(‘JS calling handler "testObjcCallback"‘)
81             //调用桥接对象的callHandler方法给oc发消息，三个参数分别是关联的key，传值信息，以及oc对js的回调
82             bridge.callHandler(‘testObjcCallback‘, {‘foo‘: ‘bar‘}, function(response) {
83                 log(‘JS got response‘, response)
84             })
85         }
86     })
87 </script>
88 <div id=‘buttons‘></div> <div id=‘log‘></div>
89 </body></html>