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");//
}];