JS和Native交互之 -WebViewJavascriptBridge

Obj-C和JavaScript原理：

Obj-C调用JavaScript很简单，可以通过webview的stringByEvaluatingJavaScriptFromString:方法调用JavaScript代码；JavaScript调用Obj-C，则是通过web view的代理方法shouldStartLoadWithRequest：来接收JavaScript的网络请求从而实现调用。

利弊：

需要把响应的方法放到桥梁内，这样对安卓端可能会中影响

不错的例子：

1.按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本，需要自己拼写完整的HTML。除此之外，还需要禁用获取的HTML文本中自带的 《 img 》 标签自动加载，并把下载图片的操作放在native端来处理，并通过JS将图片在Cache中的地址返回给UIWebview。http://www.cocoachina.com/ios/20150814/12985.html

过程：

一开始，我们在Native端和JS端都分别进行初始化：

OC端：

1

@property WebViewJavascriptBridge* bridge;

对应的初始化代码如下，在初始化中直接包含了一个用于接收JS的回调：

1

2

3

4

_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端：(以下是固定写法，你自己的JS文件中必须包含如下代码)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function connectWebViewJavascriptBridge(callback) {if (window.WebViewJavascriptBridge) {    callback(WebViewJavascriptBridge)} else {    document.addEventListener('WebViewJavascriptBridgeReady', function() {                              callback(WebViewJavascriptBridge)                              }, false)       } connectWebViewJavascriptBridge(function(bridge) { //注意，你的bridge函数都应写在这里面 } //例如function doSomething(){connectWebViewJavascriptBridge(function(bridge) {   bridge.init(function(message, yourCallback) {      log('ObjC called testJavascriptHandler with', message)       var responseData = { 'Javascript Says':'Right back atcha!' }       log('JS responding with', responseData)       responseCallback(responseData)       })    } }

然后，我们要知道，在WebViewJavascriptBridge中，交互的方式只有两种：send 和 callHandle，JS和OC都有这两个方法，所以对应的四种关系是：

OC调用JS方法

1.调用JS中bridge.init的方法

  //OC  [_bridge send:@"The message sent from ObjC to JS" responseCallback:^(id response) {    NSLog(@"sendMessage got response: %@", response);//这里的response是js方法中的data}]; //对应调用js中的方法 bridge.init(function(message, yourCallback) {    log('ObjC called testJavascriptHandler with', message)    var responseData = { 'Javascript Says':'Right back atcha!' }    log('JS responding with', responseData)    responseCallback(responseData) })

2.调用JS中bridge.registerHandler方法,该方法可以注册方法名，通过注册名确认调用方法

 //OC [_bridge callHandler:@"注册名" data:data responseCallback:^(id response) {    NSLog(@"testJavascriptHandler responded: %@", response);}]; //对应调用的js中的方法 bridge.registerHandler('注册名', 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端方法

1.调用OC中创建bridge对象时定义时的方法

 //JS中   bridge.send(data,function(response){     log('这里是回调方法',response) //回调方法   })//对应调用的OC中bridge初始化中设置的block方法_bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {    //do something...            NSLog(@"ObjC received message from JS: %@", data);//从js获得的参数    responseCallback(@"Response");//Response to js}];

2.通过方法名调用OC中bridge的注册方法

 //JS中 bridge.callHandler('注册名', {'foo': 'bar'}, function(response) {     log('JS got response', response) }) //对应调用的OC中的bridge注册的方法[_bridge registerHandler:@"注册名" handler:^(id data, WVJBResponseCallback responseCallback) {    NSLog(@"testObjcCallback called: %@", data);//从js获取的参数    responseCallback(@"Response");//}];