WebViewJavascriptBridge使用_webviewjavascriptbridge demo-CSDN博客

WebViewJavascriptBridge使用

WebViewJavascriptBridge是一个Objective-C与JavaScript进行消息互通的三方库。这里简单总结一下其使用

Objective-C初始化

  
  
   
   _bridge = [
   
   WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id 
   
   data, WVJBResponseCallback responseCallback) {
  
  
  
          
   
   NSLog(@"
   
   ObjC 
   
   received 
   
   message 
   
   from 
   
   JS: %@", 
   
   data);
  
  
  
          
   
   responseCallback(@"
   
   Response 
   
   for 
   
   message 
   
   from 
   
   ObjC");
  
  
  
  
   
       }];

这是使用类方法创建一个WebViewJavascriptBridge对象。其中有一个block类型的handle。这个handle主要是用来接收JavaScript里面通过send方法传过来的消息的，这里的handle里面的参数与JavaScript中send方法里面的参数对应。

JavaScript 初始化

  
  
   
   function connectWebViewJavascriptBridge(callback) {
  
  
  
  	
   
   if (window.WebViewJavascriptBridge) {
  
  
  
  		
   
   callback(WebViewJavascriptBridge);
  
  
  
  
   
   	} 
   
   else {
  
  
  
  
   
   		document.addEventListener(
   
   'WebViewJavascriptBridgeReady', 
   
   function() {
   
   callback(WebViewJavascriptBridge);}, 
   
   false);
  
  
  
  
   
   	}
  
  
  
  
   
   }
  
  
  
  
   
   connectWebViewJavascriptBridge(
   
   function(bridge) {
  
  
  
  
   
   	bridge.init(
   
   function(message, responseCallback) {
  
  
  
  
   
   			log(
   
   'JS got a message', message)
  
  
  
  			
   
   var data = { 
   
   'Javascript Responds':
   
   'Wee!' }
  
  
  
  
   
   			log(
   
   'JS responding with', data)
  
  
  
  
   
   			responseCallback(data)
  
  
  
  
   
   	})
  
  
  
  
   
   });

这里初始化先是创建了一个connectWebViewJavascriptBridge方法，该方法注册了一个WebViewJavascriptBridgeReady事件，同时声明了一个全局的WebViewJavascriptBridge变量。我们可以在外部通过WebViewJavascriptBridge调用相关方法。

在init里面同样有一个function，这个function同样是用来接收Objective-C里面通过send方法发送的消息的，参数与OC里的send方法参数对应

Objective-C调用JavaScript

首先要在JavaScript里面注册一个方法：

  
  
   
   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)
  
  
  
  
   
   })

OC调用这个方法

  
  
   
   [_bridge callHandler:@
   
   "testJavascriptHandler" 
   
   data:data responseCallback:^(id response) {
  
  
  
          
   
   NSLog(@"
   
   testJavascriptHandler 
   
   responded: %@", 
   
   response);
  
  
  
  
   
    }];

JavaScript调用Objective-C

OC注册一个方法：

  
  
   
   [_bridge registerHandler:@
   
   "testObjcCallback" handler:^(id 
   
   data, WVJBResponseCallback responseCallback) {
  
  
  
          
   
   NSLog(@"
   
   testObjcCallback 
   
   called: %@", 
   
   data);
  
  
  
          
   
   responseCallback(@"
   
   Response 
   
   from 
   
   testObjcCallback");
  
  
  
  
   
    }];

JavaScript调用方法

  
  
   
   bridge.callHandler(
   
   'testObjcCallback', {
   
   'foo': 
   
   'bar'}, 
   
   function(response) {
  
  
  
  
   
   	log(
   
   'JS got response', response)
  
  
  
  
   
   });

JavaScript向OC中发送消息

  
  
   
   bridge.send(
   
   data, function(responseData) {
  
  
  
  	
   
   log('
   
   JS 
   
   got 
   
   response', 
   
   responseData)
  
  
  
  
   
   });

这种方式发送消息实际上是调用了OC初始化时的handle

OC向JavaScript发送消息

  
  
   
   [_bridge send:
   
   @"A string sent from ObjC before Webview has loaded." responseCallback:^(
   
   id responseData) {
  
  
  
          
   
   NSLog(
   
   @"objc got response! %@", responseData);
  
  
  
  
   
   }];

这个send方法，实际上是调用了JavaScript初始化init里面的function