這里照搬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 = @{ @"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 = 1 35 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 = { 'Javascript Responds':'Wee!' } 48 log('JS responding with', data) 49 responseCallback(data) 50 }) 51 52 //這個方法用於js接收oc的callHandler，handler用一個key標記，可以注冊多個handler 53 bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) { 54 log('ObjC called testJavascriptHandler with', data) 55 var responseData = { '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 = 'Hello from JS button' 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回發的響應信息。