首页 > 代码库 > 通过WebViewJavascriptBridge实现OC与JS交互
通过WebViewJavascriptBridge实现OC与JS交互
这里照搬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 = http://www.mamicode.com/@{ @"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 = 135 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 = http://www.mamicode.com/{ ‘Javascript Responds‘:‘Wee!‘ }48 log(‘JS responding with‘, data)49 responseCallback(data)50 })51 52 //这个方法用于js接收oc的callHandler，handler用一个key标记，可以注册多个handler53 bridge.registerHandler(‘testJavascriptHandler‘, function(data, responseCallback) {54 log(‘ObjC called testJavascriptHandler with‘, data)55 var responseData = http://www.mamicode.com/{ ‘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 = http://www.mamicode.com/‘Hello from JS button‘"color: #008080;">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>
JS的关键在于connectWebViewJavascriptBridge函数，log方法用于输出日志，是用户的自定义函数，所有的自定义函数都要写在connectWebViewJavascriptBridge当中作为成员。
bridge.init和bridge.registerHandler方法用于接收OC发来的send和callHandler，并对OC进行回调。
之后定义了两个按钮，通过上述两种方式直接调用OC，并处理OC回发的响应信息。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。