在開發的過程中，我們會遇到原生app與web的交互，除了用WebView加載HTML5文件顯示外，還可能需要和WebView進行交互，例如點擊WebView上面的按鈕調用原生OC的函數方法，上一章總結了JavaScriptCore的用法，這一章我們來學習另一種方法WebViewJavascriptBridge這個開源項目。
WebViewJavascriptBridge是一個輕量的用於OC與JS交互的第三方庫。WebViewJavascriptBridge是支持到iOS6之前的版本的，用於支持Native的iOS與JavaScript交互。如果需要支持到iOS6之前的app，使用它是很不錯的。本篇講講WebViewJavascriptBridge的基本原理及詳細講講如何去使用，包括iOS端的使用和JS端的使用。
基本原理
WebViewJavascriptBridge的本質也是通過Webview代理攔截
代碼：
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
if (webView != _webView) { return YES; }
NSURL *url = [request URL];
__strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
if ([_base isCorrectProcotocolScheme:url]) {
if ([_base isBridgeLoadedURL:url]) {
[_base injectJavascriptFile];
} else if ([_base isQueueMessageURL:url]) {
NSString *messageQueueString = [self _evaluateJavascript:[_base webViewJavascriptFetchQueyCommand]];
[_base flushMessageQueue:messageQueueString];
} else {
[_base logUnkownMessage:url];
}
return NO;
} else if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:shouldStartLoadWithRequest:navigationType:)]) {
return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
} else {
return YES;
}
}
代碼解釋:
通過webView代理攔截後，首先通過isBridgeLoadedURL方法判斷是否是bridge即需要橋接的URL，如果是，則通過injectJavascriptFile方法注入JS;否則判斷URL是否是隊列消息，如果是，那麼執行查詢命令JS並刷新隊列消息；否則URL被識別爲未知的消息。
使用步驟
使用它可以用CocoaPods導入：
pod ‘WebViewJavascriptBridge’, ‘~> 5.0.5’
引入WebViewJavascriptBridge
// 開啓日誌
[WebViewJavascriptBridge enableLogging];
// 給webview建立JS與OjbC的溝通橋樑
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[self.bridge setWebViewDelegate:self];
JS調用OC
本章節demo的HTML代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 來自html中的jsCallOC標題</title>
<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>
<h2>WebViewJavascriptBridge</h2>
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
}
/*這段代碼是固定的，必須要放到js中*/
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
/*與OC交互的所有JS方法都要放在此處註冊，才能調用通過JS調用OC或者讓OC調用這裏的JS*/
setupWebViewJavascriptBridge(function(bridge) {
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)
}
}
/* Initialize your app here */
/*JS給ObjC提供公開的API，ObjC端通過註冊，就可以在JS端調用此API時，得到回調。ObjC端可以在處理完成後，反饋給JS，這樣寫就是在載入頁面完成時就先調用*/
document.getElementById('callmeId').onclick = function (e) {
log('JS端 call OC端: callme')
bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992'}, function(response) {
log('JS端 得到 response', response)
})
}
document.getElementById('callAlertId').onclick = function (e) {
log('JS端 call OC端: callAlert')
bridge.callHandler('callAlert', {'title': '來自JS的message'}, function(response) {
log('JS端 得到 response', response)
})
}
/*JS給ObjC提供公開的API，在ObjC端可以手動調用JS的這個API。接收ObjC傳過來的參數，且可以回調ObjC*/
bridge.registerHandler('factorial', function(data, responseCallback) {
log("Get user information from ObjC: ", data)
//JS反饋給OC
responseCallback({'result': factorial(data)})
})
/*我們在這注冊一個js調用OC的方法，不帶參數，且不用ObjC端反饋結果給JS*/
bridge.registerHandler('openWebviewBridge', function() {
log("openWebviewBridge was called with by ObjC")
})
var factorial = function(n) {
if (n < 0)
return;
if (n === 0)
return 1;
return n * factorial(n - 1)
};
})
</script>
<div id='buttons'></div> <div id='log'></div>
<div>
<input type="button" value="JS調用OC傳值" id="callmeId"/>
</div>
<div>
<input type="button" value="調用原生Alert" id="callAlertId">
</div>
</body>
</html>
1.JS調用原生callme方法，首先需要在OC端註冊此方法。如果JS端需要返回值的話我們可以通過responseCallback將返回值傳過去。
[self.bridge registerHandler:@"callme" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"執行任務了, data from js is %@", data);
if (responseCallback) {
//OC反饋給JS
responseCallback(@"這是OC給JS的反饋哦~");
}
}];
2.同時JS端調用OC方法，通過bridge.callHandler來調用：
bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992'}, function(response) {
log('JS端 得到 response', response)
})
這樣雙方建立了通道，實現了JS調用OC原生方法。
參數說明：callme是OC端註冊的方法，在OC端註冊後，JS可以通過這個方法名與OC交互。比如點擊JS調用OC傳值這個按鈕時，就會執行callHandle方法，JS端將參數傳給了iOS端，當iOS端收到參數時，通過responseCallback回調反饋給JS端，JS端收到返回值。
效果圖如下：
打印日誌
打印日誌
OC調用JS
1.OC調用JS端factorial函數，首先在JS端註冊factorial方法
/*JS給ObjC提供公開的API，在ObjC端可以手動調用JS的這個API。接收ObjC傳過來的參數，且可以回調ObjC*/
bridge.registerHandler('factorial', function(data, responseCallback) {
log("Get user information from ObjC: ", data)
//JS反饋給OC
responseCallback({'result': factorial(data)})
})
2.同時OC調用JS方法,通過[self.bridge callHandler:@”factorial” data:responseCallback:^(id responseData) {}]調用：
// OC調用JS方法
//OC給JS提供公開的API，JS端通過註冊，就可以在OC端調用此API並傳入參數時，得到回調。
NSLog(@"OC端 call JS端");
[self.bridge callHandler:@"factorial" data: [NSNumber numberWithInteger:[textField.text integerValue]] responseCallback:^(id responseData) {
resultL.text = [NSString stringWithFormat:@"結果%@", [responseData objectForKey:@"result"]];
NSLog(@"OC端得到回調responseData: %@",responseData);
}];
通過以上代碼實現了OC調用JS。
效果圖如下：
打印日誌
接下來是OC調用JS方法（無參）
JS端註冊
/*我們在這注冊一個js調用OC的方法，不帶參數，且不用ObjC端反饋結果給JS*/
bridge.registerHandler('openWebviewBridge', function() {
log("openWebviewBridge was called with by ObjC")
})
OC端調用
//OC給JS提供公開的API，JS端通過註冊，就可以在OC端調用此API，沒有參數傳入和回調。
[self.bridge callHandler:@"openWebviewBridge" data:nil];
NSLog(@"OC端 call JS端: openWebviewBridge");
Demo下載
喜歡的親們隨手給個星星
總結
在寫這個demo的過程中遇到不少問題，尤其是JS端，需要注意的是JS端一定要寫log，否則沒有回調。總的來說相對於JavaScriptCore更復雜一點，缺點就是要固定的加入相關代碼，JS端代碼要在固定的函數內添加，本文只是簡單的介紹了交互的基本原理和幾個常用的方法，僅供交流學習，如果有理解錯誤的地方還請大家多多指教。