WebViewJavascriptBridge是一個有點年代的JS與OC互動的庫，使用該庫的著名應用還挺多的，目前這個庫有7000+star。我去翻看了它的第一版本已經是4年前了，在版本V4.1.4以及之前，該庫只有一個類和一個js 的txt檔案，所以舊版本的WebViewJavascriptBridge 是非常容易理解的。而最新版的WebViewJavascriptBridge因為也要相容WKWebView，所以裡面也加入了兩個新的類，一開始看的時候，會被它裡面複雜的邏輯嚇到，其實仔細閱讀後，它還是非常簡單的。
WebViewJavascriptBridge使用講解
由於WebViewJavascriptBridge在UIWebView和WKWebView下的使用有些許差別，所以就分成兩篇文章來講解WebViewJavascriptBridge。
本文介紹的是在UIWebView中使用WebViewJavascriptBridge來達到JS與OC互相呼叫的目的。WKWebView使用的是WKWebViewJavascriptBridge。接下來，我就從零開始邊搭建工程邊講解WebViewJavascriptBridge。
先上效果圖：
第一步、搭建工程，將WebViewJavascriptBridge庫新增到工程中。
新建工程的步驟就略過了，WebViewJavascriptBridge的github地址是：WebViewJavascriptBridge，我使用的是版本V5.0.5。
目前我Demo中的WebViewJavascriptBridge庫在最新的iOS系統有崩潰，各位在使用該第三方庫時，要先更新到最新版本。
第二步、建立UIWebView和WebViewJavascriptBridge示例。
2.1 建立UIWebView
建立UIWebView的程式碼(viewDidLoad中截選)：
self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
[self.view addSubview:self.webView];
NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
NSURLRequest *request = [NSURLRequest requestWithURL:htmlURL];
// UIWebView 滾動的比較慢，這裡設定為正常速度
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
[self.webView loadRequest:request];
複製程式碼這裡不要為UIWebView設定代理，因為在建立WebViewJavascriptBridge的時候，UIWebView的代理已經被賦值給了WebViewJavascriptBridge。
2.2 建立WebViewJavascriptBridge
因為WebViewJavascriptBridge例項，在控制器中多個地方用到，因此最好定義一個property或者例項變數存起來。
_webViewBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// {setWebViewDelegate}這個方法，可以將UIWebView的代理，從_webViewBridge中再傳遞出來。
// 所以如果你要在控制器中實現UIWebView的代理方法時，新增下面這樣程式碼，否則可以不寫。
[_webViewBridge setWebViewDelegate:self];
複製程式碼然後跟蹤進{- bridgeForWebView }方法，看它具體是怎麼實現的。
+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
WebViewJavascriptBridge* bridge = [[self alloc] init];
[bridge _platformSpecificSetup:webView];
return bridge;
}
// 上面方法呼叫了這個方法
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
_webView = webView;
_webView.delegate = self;
_base = [[WebViewJavascriptBridgeBase alloc] init];
_base.delegate = self;
}
複製程式碼其實{-bridgeForWebView }內部也不過是初始化了一個WebViewJavascriptBridge物件，併為其例項變數_webView 和 _base賦值而已。
第三步、註冊js 要呼叫的Native 功能。
先上示例程式碼，再分析功能：
#pragma mark - private method
- (void)registerNativeFunctions
{
[self registScanFunction];
[self registShareFunction];
[self registLocationFunction];
[self regitstBGColorFunction];
[self registPayFunction];
[self registShakeFunction];
}
- (void)registShareFunction
{
// 所有JS 需要呼叫的原生功能都要先用registerHandler註冊一下
[_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
// data 的型別與 JS中傳的引數有關
NSDictionary *tempDic = data;
// 在這裡執行分享的操作
NSString *title = [tempDic objectForKey:@"title"];
NSString *content = [tempDic objectForKey:@"content"];
NSString *url = [tempDic objectForKey:@"url"];
// 將分享的結果返回到JS中
NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
responseCallback(result);
}];
}
複製程式碼- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler 該方法有兩個引數：第一個引數handlerName，是對這個功能起的一個別名；第二個引數handler，是個block，也就是Native 實現的功能。JS要呼叫的Native 實現其實就是block 的 {} 內的程式碼功能。
為了便於維護，我們可以將JS要呼叫的Native方法都集中到一起，然後單個功能再封裝一個方法。
第四步、完成HMTL必要的JS程式碼
由於WebViewJavascriptBridge也是攔截URL來實現的呼叫原生功能，所以有一些程式碼跟之前iOS下JS與OC互相呼叫（一）中的HTML JS程式碼很相似。
HTML 中有一個必須要新增的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)
}
複製程式碼上面這個方法的引數是一個function，這個方法的作用主要是在第一次載入HTML的時候起作用，目的是載入一次wvjbscheme://__BRIDGE_LOADED__，來觸發往HTML中注入一些已經寫好的JS方法。
看看上面的方法與下面這個是不是很相似：
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 發起請求後這個iFrame就沒用了，所以把它從dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
複製程式碼新增完setupWebViewJavascriptBridge方法，需要在JS中主動呼叫一次該方法：
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
alert('JS方法被呼叫:'+data);
responseCallback('js執行過了');
})
})
複製程式碼Native 需要呼叫的 JS 功能，也是需要先註冊，然後再執行的。如果Native 需要呼叫的JS 功能有多個，那麼這些功能都要在這裡先註冊，註冊之後才能夠被Native 呼叫。 接下來需要好好分析一下JS 中這個方法的作用了。
這裡是重點：
1、首先呼叫
setupWebViewJavascriptBridge，第一次執行的時候，由於window.WebViewJavascriptBridge和window.WVJBCallbacks都不存在，所以會繼續往下執行，將引數callback（它是一個function）裝進陣列賦值給window.WVJBCallbacks。 js 支援動態新增屬性 並賦值，這裡window.WVJBCallbacks = [callback];就是動態新增屬性，並賦值。 另外js中的全域性變數都可以使用window.xxxx來呼叫;動態新增的屬性也可以不加window.，直接使用。
2、WebViewJavascriptBridge 幫助JS呼叫Native的url 有兩種，一種是
wvjbscheme://__BRIDGE_LOADED__；而另一種是wvjbscheme://__WVJB_QUEUE_MESSAGE__。前者只有在呼叫setupWebViewJavascriptBridge的時候執行一次，一般來說這個url 如果沒有頁面應該只會執行一次。第二種url所有js呼叫Native 功能時，都會使用到。
3、在攔截到自定義的url 時，
WebViewJavascriptBridge分了三種情況，如果是wvjbscheme://__BRIDGE_LOADED__,就往HMTL 中注入已經寫好的js，這個js 在WebViewJavascriptBridge_JS中；如果是wvjbscheme://__WVJB_QUEUE_MESSAGE__,那就利用stringByEvaluatingJavaScriptFromString，取回撥用js中callHandler傳進去的引數。 然後再從WebViewJavascriptBridge之前儲存的Native 方法對應的block，呼叫對應的block。
第五步、呼叫Native 功能
利用之前注入的JS方法callHandler 就可以呼叫Native 功能了。 示例程式碼如下：
function shareClick() {
var params = {'title':'測試分享的標題','content':'測試分享的內容','url':'http://www.baidu.com'};
WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
alert(response);
document.getElementById("returnValue").value = response;
});
}
複製程式碼這裡callHandler前的WebViewJavascriptBridge,其實就是上一步注入到JS中的程式碼中，動態建立屬性，動態賦值的屬性。如下程式碼片段可以在WebViewJavascriptBridge_JS中找到。
window.WebViewJavascriptBridge = {
registerHandler: registerHandler,
callHandler: callHandler,
disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
_fetchQueue: _fetchQueue,
_handleMessageFromObjC: _handleMessageFromObjC
};
複製程式碼而callHandler 內部呼叫了另一個js function _doSend,而_doSend內部其實，就是把handlerName和 引數data，再加上callbackId 裝成鍵值對，然後儲存到陣列sendMessageQueue，同時載入一次wvjbscheme://__WVJB_QUEUE_MESSAGE__。
到此 利用WebViewJavascriptBridge實現JS 呼叫iOS Native 就完成了。
第六步、Native 呼叫 js 功能
Native 呼叫js 的功能，也需要先在js 中為要呼叫的功能註冊一個別名。
6.1 js 註冊Native 要呼叫的功能
示例程式碼：
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJSFunction', function(data, responseCallback) {
alert('JS方法被呼叫:'+data);
responseCallback('js執行過了');
})
// 註冊其他的功能
//bridge.regsiterHandler.....
})
複製程式碼6.2 Native 呼叫功能的別名handlerName
示例程式碼：
// // 如果不需要引數，不需要回撥，使用這個
// [_webViewBridge callHandler:@"testJSFunction"];
// // 如果需要引數，不需要回撥，使用這個
// [_webViewBridge callHandler:@"testJSFunction" data:@"一個字串"];
// 如果既需要引數，又需要回撥，使用這個
[_webViewBridge callHandler:@"testJSFunction" data:@"一個字串" responseCallback:^(id responseData) {
NSLog(@"呼叫完JS後的回撥：%@",responseData);
}];
複製程式碼而callHandler 方法又是如何實現呼叫js 方法的呢？
callHandler 內部是將傳遞給js 的引數、handlerName、callbackId組合成字典，然後把字典轉換成字串，將轉換後的字串以引數的形式，通過stringByEvaluatingJavaScriptFromString傳遞給js ，js 中將傳遞過來的字串轉成json ，然後通過handlerName 獲取對應的function執行。
關鍵的幾個程式碼段：
// 這裡是Native 呼叫js ，把引數轉換為字串，執行js 中的_handleMessageFromObjC方法。
- (void)_dispatchMessage:(WVJBMessage*)message {
NSString *messageJSON = [self _serializeMessage:message pretty:NO];
[self _log:@"SEND" json:messageJSON];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
if ([[NSThread currentThread] isMainThread]) {
[self _evaluateJavascript:javascriptCommand];
} else {
dispatch_sync(dispatch_get_main_queue(), ^{
[self _evaluateJavascript:javascriptCommand];
});
}
}
複製程式碼下面這裡是找到handlerName 對應的function，並執行function。
var handler = messageHandlers[message.handlerName];
if (!handler) {
console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
} else {
handler(message.data, responseCallback);
}
複製程式碼到這裡 利用WebViewJavascriptBridge 實現Native 呼叫js 的功能就完成了。
提醒： JS 有動態引數的特性，呼叫js 的方法，可以傳0個引數，1個引數，N個引數都可以。 例如，我們在js中定義一個test()方法，我們可以呼叫test()，來執行這個方法；如果有引數要傳進來，也可以呼叫test(xxx)；如果有多個引數，那麼就用test(xxx,xxx)。當然如果我們定義的引數是test(a,b,c)，也可以少傳引數，或者不傳引數呼叫test()。
總結
利用WebViewJavascriptBridge來實現JS與OC的互動的優點：
1、獲取引數時，更方便一些，如果引數中有一些特殊符號或者url帶引數，能夠很好的解析。
也有一些缺點：
1、做一次互動，需要執行的js 與原生的互動步驟較多，至少有兩次。
2、需要花較多的時間，理解WebViewJavascriptBridge的原理和使用步驟。
示例工程地址：JS_OC_WebViewJavascriptBridge
Have Fun!