您的位置：首页 > 移动开发

通过WebViewJavascriptBridge实现OC与JS交互

2014-06-13 10:10 274 查看

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

#import <UIKit/UIKit.h>

@interface ExampleAppViewController : UINavigationController <UIWebViewDelegate>

@end

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

@interface ExampleAppViewController ()
@property WebViewJavascriptBridge* bridge;
@end

@implementation ExampleAppViewController

//在页面显示出来之前，注册bridge对象
- (void)viewWillAppear:(BOOL)animated {
if (_bridge) { return; }

UIWebView* webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];
[self.view addSubview:webView];

//开启调试信息
[WebViewJavascriptBridge enableLogging];

//响应JS通过send发送给OC的消息
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC received message from JS: %@", data);
responseCallback(@"Response for message from ObjC");
}];

//响应JS通过callhandler发送给OC的消息
[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"testObjcCallback called: %@", data);
responseCallback(@"Response from testObjcCallback");
}];

[self renderButtons:webView];
[self loadExamplePage:webView];
}

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

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

//OC调用send给JS发消息
- (void)sendMessage:(id)sender {
[_bridge send:@"A string sent from ObjC to JS" responseCallback:^(id response) {
NSLog(@"sendMessage got response: %@", response);
}];
}

//OC调用callHandler给JS发消息
- (void)callHandler:(id)sender {
id data = @{ @"greetingFromObjC": @"Hi there, JS!" };
[_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id response) {
NSLog(@"testJavascriptHandler responded: %@", response);
}];
}

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

下面是JS端：

<!doctype html>
<html><head>
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1 { color:steelblue; font-size:24px; margin-top:24px; }
button { margin:0 3px 10px; font-size:12px; }
.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
</style>
</head><body>
<h1>WebViewJavascriptBridge Demo</h1>
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
}

//用于创建桥接对象的函数
function connectWebViewJavascriptBridge(callback) {
//如果桥接对象已存在，则直接调用callback函数
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
}
//否则添加一个监听器来执行callback函数
else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
}

//页面加载后，立刻调用创建桥接对象的函数
connectWebViewJavascriptBridge(function(bridge) {
//用户自定义的函数都要写在这里
//这里由用户自定义了一个函数，用来写日志到UI，也就是一个普通的js函数
var uniqueId = 1
function log(message, data) {
var log = document.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
if (log.children.length) { log.insertBefore(el, log.children[0]) }
else { log.appendChild(el) }
}

//这个方法用于js接收oc发来的send，并使用responseCallback方法给OC回发消息
bridge.init(function(message, responseCallback) {
log('JS got a message', message)
var data = { 'Javascript Responds':'Wee!' }
log('JS responding with', data)
responseCallback(data)
})

//这个方法用于js接收oc的callHandler，handler用一个key标记，可以注册多个handler
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
responseCallback(responseData)
})

//添加js给oc发消息的按钮
var button = document.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = 'Send message to ObjC'
button.onclick = function(e) {
e.preventDefault()
var data = 'Hello from JS button'
log('JS sending message', data)
//调用桥接对象的send方法给oc发消息，第二个参数（函数）是oc对js的返回
bridge.send(data, function(responseData) {
log('JS got response', responseData)
})
}

document.body.appendChild(document.createElement('br'))

//添加js调用oc方法的测试按钮
var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = 'Fire testObjcCallback'
callbackButton.onclick = function(e) {
e.preventDefault()
log('JS calling handler "testObjcCallback"')
//调用桥接对象的callHandler方法给oc发消息，三个参数分别是关联的key，传值信息，以及oc对js的回调
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
log('JS got response', response)
})
}
})
</script>
<div id='buttons'></div> <div id='log'></div>
</body></html>

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航