iOS與網頁JS互動，看我就夠了
隨著移動APP的快速迭代開發趨勢，越來越多的APP中嵌入了html網頁，但在一些大中型APP中，尤其是電商類APP，html頁面已經不僅僅滿足展示功能，這時html要求能與原生語言進行互動、相互傳值。比如攜程APP中一個熱門景點的網頁中，點選某個景點，可以跳轉到原生中的該景點詳情頁控制器。
為此，我整理了三種最常用最便捷有效的OC與JS互動的方式，供大家學習交流。
第一種：JS給OC傳值。
1. 技術方案：使用JavaScriptCore.framework框架
2. 使用場景： 網頁中程式碼中的某個方法，比如點選事件方法，將該方法的引數傳值給OC，供OC使用。
比如：攜程APP中一個熱門景點的網頁中，有很多個熱門景點，點選某個景點的圖片或名稱，可以跳轉到原生中的該景點詳情頁控制器。
3. 程式碼實現如下：
OC裡要實現的程式碼：
拖入JavaScriptCore.framework靜態庫，遵守UIWebViewDelegate代理協議。
在-webViewDidFinishLoad:方法裡編寫如下程式碼：
- (void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"passValue" 其中 passValue 是JS的函式名，得到的 arg陣列 裡面為JS的 passValue 函式的引數，即 JS要傳給OC的引數。
JS裡要實現的程式碼：
function testClick()
{
var str1=document.getElementById("text1" 在需要給OC傳值的函式裡（例如：testClick（））直接呼叫 passValue（）函式，將值傳進去即可。
第二種：JS給OC傳值。
1. 技術方案：使用自定義url方法，每次點選網頁
2. 使用場景： 網頁中程式碼中的某個方法，比如點選事件方法，將該方法的引數傳值給OC，供OC使用。
比如：攜程APP中一個熱門景點的網頁中，有很多個熱門景點，點選某個景點的圖片或名稱，可以跳轉到原生中的該景點詳情頁控制器。
3. 程式碼實現如下：
JS裡要實現的程式碼：
function testClick()
{
var str1=document.getElementById("text1").value;
var str2=document.getElementById("text2").value;
// "objc://"為自定義協議頭;
// str1&str2為要傳給OC的值,以":/"作為分隔
window.location.href="objc://"+":/"+str1+":/"+str2;
}在需要給OC傳值的函式裡（例如：testClick（））寫如上格式的程式碼。
其中 objc:// 是自定義的協議頭，str1與str2為JS要傳給OC的值。
OC裡要實現的程式碼：
//遵守UIWebViewDelegate代理協議。
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
//拿到網頁的實時url
NSString *requestStr = [[request.URL absoluteString] stringByRemovingPercentEncoding];
//在url中尋找自定義協議頭"objc://"
if ([requestStr hasPrefix:@"objc://"]) {
// 以"://"為中心將url分割成兩部分，放進陣列arr
NSArray *arr = [requestStr componentsSeparatedByString:@"://"];
NSLog(@"%@",arr);
//取其後半段
NSString *paramStr = arr[1];
NSLog(@"%@",paramStr);
//以":/"為標識將後半段url分割成若干部分，放進陣列arr2，此時arr2[0]為空，arr2[1]為第一個傳參值，arr2[2]為第二個傳參值，以此類推
NSArray *arr2 = [paramStr componentsSeparatedByString:@":/"];
NSLog(@"%@",arr2);
//取出引數，進行使用
if (arr2.count) {
NSLog(@"有引數");
[self doSomeThingWithParamA:arr2[1] andParamB:arr2[2]];
}else{
NSLog(@"無引數");
}
return NO;
}
return YES;
}
//對JS傳來的值進行呼叫
- (void)doSomeThingWithParamA:(id)paramA andParamB:(id)paramB{
NSLog(@"%@ %@", paramA, paramB);
}第三種：利用第三方庫實現JS與OC的相互傳值。
1. 技術方案：使用WebViewJavascriptBridge三方庫
2. 使用場景： 網頁中程式碼中的某個方法，比如點選事件方法，將該方法的引數傳值給OC，供OC使用。
比如：攜程APP中一個熱門景點的網頁中，有很多個熱門景點，點選某個景點的圖片或名稱，可以跳轉到原生中的該景點詳情頁控制器。
或者將原生中的使用者資訊傳遞給網頁，以便其個性化展示
3. 程式碼實現如下：
OC傳值給JS
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)
}
//呼叫上面定義的函式
setupWebViewJavascriptBridge(function (bridge){
//OC傳值給JS 'testJavascriptHandler'為雙方自定義好的統一方法名；'data'是OC傳過來的值；'responseCallback'是JS接收到之後給OC的回撥
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
//列印OC傳過來的值
log('ObjC called testJavascriptHandler with', data)
var responseData = { 'Javascript Says':'Right back atcha!' }
log('JS responding with', responseData)
//給OC的回撥
responseCallback(responseData)
})OC裡需要實現的程式碼：
匯入第三方庫WebViewJavascriptBridge；遵守UIWebViewDelegate；
//設定第三方Bridge是否可用
[WebViewJavascriptBridge enableLogging];
//關聯webView和bridge
_bridge = [WebViewJavascriptBridge bridgeForWebView:web];
[_bridge setWebViewDelegate:self];
//OC給JS傳值，雙方自定義一個統一的方法名'testJavascriptHandler'；data裡即為要傳過去的值
[_bridge callHandler:@"testJavascriptHandler" data:@{@"年齡":@"20"}];JS傳值給OC
JS裡需要實現的程式碼：
//點選網頁上一個按鈕時
callbackBt.onclick = function()
{
var str1=document.getElementById("text1").value;
var str2=document.getElementById("text2").value;
//JS給OC傳值。'passValue'為雙方自定義的統一方法名；'str1'&'str2'為要傳的值； response為OC收到後給JS的回撥
bridge.callHandler('passValue', {str1,str2}, function(response) {
})
}OC裡需要實現的程式碼：
匯入第三方庫WebViewJavascriptBridge；遵守UIWebViewDelegate；
//設定第三方Bridge是否可用
[WebViewJavascriptBridge enableLogging];
//關聯webView和bridge
_bridge = [WebViewJavascriptBridge bridgeForWebView:web];
[_bridge setWebViewDelegate:self];
//js給oc傳值.'passValue'為雙方自定義的統一方法名；'data'為JS傳過來的值；'responseCallback'為OC收到值後給JS返回的回撥
[_bridge registerHandler:@"passValue" handler:^(id data, WVJBResponseCallback responseCallback) {
//列印js傳過來的值
NSLog(@"%@", data);
//返回給js的值
responseCallback(@"收到了");
}];需要注意的是：不論哪方給哪方傳值，傳值的方法名稱與對應接收值的方法名稱要保持一致。
有任何問題，大家可以在評論區留言，我會一一解答。