隨著移動APP的快速迭代開發(fā)趨勢，越來越多的APP中嵌入了html網(wǎng)頁，但在一些大中型APP中，尤其是電商類APP，html頁面已經(jīng)不僅僅滿足展示功能，這時html要求能與原生語言進行交互、相互傳值。比如攜程APP中一個熱門景點的網(wǎng)頁中，點擊某個景點，可以跳轉(zhuǎn)到原生中的該景點詳情頁控制器。
為此，我整理了三種最常用最便捷有效的OC與js交互的方式，供大家學習交流。
1. 技術方案：使用JavaScriptCore.framework框架
2. 使用場景： 網(wǎng)頁中代碼中的某個方法，比如點擊事件方法，將該方法的參數(shù)傳值給OC，供OC使用。
比如：攜程APP中一個熱門景點的網(wǎng)頁中，有很多個熱門景點，點擊某個景點的圖片或名稱，可以跳轉(zhuǎn)到原生中的該景點詳情頁控制器。
3. 代碼實現(xiàn)如下：
拖入JavaScriptCore.framework靜態(tài)庫，遵守UIWebViewDelegate代理協(xié)議。
在-webViewDidFinishLoad:方法里編寫如下代碼：
- (void)webViewDidFinishLoad:(UIWebView*)webView{? ? JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];? ? context[@"passValue"] = ^{NSArray*arg = [JSContext currentArguments];for(idobj in arg) {NSLog(@"%@", obj);? ? ? ? }? ? };}
其中passValue是JS的函數(shù)名，得到的arg數(shù)組里面為JS的passValue函數(shù)的參數(shù)，即JS要傳給OC的參數(shù)。
functiontestClick(){varstr1=document.getElementById("text1").value;varstr2=document.getElementById("text2").value;? ? ? ? ? ? ? ? passValue(str1,str2);? ? ? ? ? ? }
在需要給OC傳值的函數(shù)里（例如：testClick（））直接調(diào)用passValue（）函數(shù)，將值傳進去即可。
1. 技術方案：使用自定義url方法，每次點擊網(wǎng)頁
2. 使用場景： 網(wǎng)頁中代碼中的某個方法，比如點擊事件方法，將該方法的參數(shù)傳值給OC，供OC使用。
比如：攜程APP中一個熱門景點的網(wǎng)頁中，有很多個熱門景點，點擊某個景點的圖片或名稱，可以跳轉(zhuǎn)到原生中的該景點詳情頁控制器。
3. 代碼實現(xiàn)如下：
function testClick()? ? ? ? ? ? {? ? ? ? ? ? ? ? var str1=document.getElementById("text1").value;var str2=document.getElementById("text2").value;//"objc://"為自定義協(xié)議頭;//? str1&str2為要傳給OC的值,以":/"作為分隔? ? ? ? ? ? ? ? window.location.href="objc://"+":/"+str1+":/"+str2;}
在需要給OC傳值的函數(shù)里（例如：testClick（））寫如上格式的代碼。
其中objc://是自定義的協(xié)議頭，str1與str2為JS要傳給OC的值。
//遵守UIWebViewDelegate代理協(xié)議。-(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{//拿到網(wǎng)頁的實時urlNSString*requestStr = [[request.URLabsoluteString] stringByRemovingPercentEncoding];//在url中尋找自定義協(xié)議頭"objc://"if([requestStr hasPrefix:@"objc://"]) {// 以"://"為中心將url分割成兩部分，放進數(shù)組arrNSArray*arr = [requestStr componentsSeparatedByString:@"://"];NSLog(@"%@",arr);//取其后半段NSString*paramStr = arr[1];NSLog(@"%@",paramStr);//以":/"為標識將后半段url分割成若干部分，放進數(shù)組arr2，此時arr2[0]為空，arr2[1]為第一個傳參值，arr2[2]為第二個傳參值，以此類推NSArray*arr2 = [paramStr componentsSeparatedByString:@":/"];NSLog(@"%@",arr2);//取出參數(shù)，進行使用if(arr2.count) {NSLog(@"有參數(shù)");? ? ? ? ? ? [selfdoSomeThingWithParamA:arr2[1] andParamB:arr2[2]];? ? ? ? }else{NSLog(@"無參數(shù)");? ? ? ? }returnNO;? ? }returnYES;}//對JS傳來的值進行調(diào)用- (void)doSomeThingWithParamA:(id)paramA andParamB:(id)paramB{NSLog(@"%@? ? %@", paramA, paramB);}
1. 技術方案：使用WebViewJavascriptBridge三方庫
2. 使用場景： 網(wǎng)頁中代碼中的某個方法，比如點擊事件方法，將該方法的參數(shù)傳值給OC，供OC使用。
比如：攜程APP中一個熱門景點的網(wǎng)頁中，有很多個熱門景點，點擊某個景點的圖片或名稱，可以跳轉(zhuǎn)到原生中的該景點詳情頁控制器。
或者將原生中的用戶信息傳遞給網(wǎng)頁，以便其個性化展示
3. 代碼實現(xiàn)如下：
functionsetupWebViewJavascriptBridge(callback){if(window.WebViewJavascriptBridge) {returncallback(WebViewJavascriptBridge); }if(window.WVJBCallbacks) {returnwindow.WVJBCallbacks.push(callback); }? ? ? ? window.WVJBCallbacks = [callback];varWVJBIframe = document.createElement('iframe');? ? ? ? WVJBIframe.style.display ='none';? ? ? ? WVJBIframe.src ='wvjbscheme://__BRIDGE_LOADED__';? ? ? ? document.documentElement.appendChild(WVJBIframe);? ? ? ? setTimeout(function(){document.documentElement.removeChild(WVJBIframe) },0)? ? }//調(diào)用上面定義的函數(shù)setupWebViewJavascriptBridge(function(bridge){//OC傳值給JS 'testJavascriptHandler'為雙方自定義好的統(tǒng)一方法名；'data'是OC傳過來的值；'responseCallback'是JS接收到之后給OC的回調(diào)bridge.registerHandler('testJavascriptHandler',function(data, responseCallback){//打印OC傳過來的值log('ObjC called testJavascriptHandler with', data)varresponseData = {'Javascript Says':'Right back atcha!'}? ? ? ? ? ? ? ? log('JS responding with', responseData)//給OC的回調(diào)responseCallback(responseData)? ? ? ? ? ? })
導入第三方庫WebViewJavascriptBridge；遵守UIWebViewDelegate；
//設置第三方Bridge是否可用[WebViewJavascriptBridge enableLogging];//關聯(lián)webView和bridge_bridge = [WebViewJavascriptBridge bridgeForWebView:web];? ? [_bridge setWebViewDelegate:self];//OC給JS傳值，雙方自定義一個統(tǒng)一的方法名'testJavascriptHandler'；data里即為要傳過去的值[_bridge callHandler:@"testJavascriptHandler"data:@{@"年齡":@"20"}];
//點擊網(wǎng)頁上一個按鈕時callbackBt.onclick =function(){varstr1=document.getElementById("text1").value;varstr2=document.getElementById("text2").value;//JS給OC傳值。'passValue'為雙方自定義的統(tǒng)一方法名；'str1'&'str2'為要傳的值； response為OC收到后給JS的回調(diào)bridge.callHandler('passValue', {str1,str2},function(response){})? ? }
導入第三方庫WebViewJavascriptBridge；遵守UIWebViewDelegate；
//設置第三方Bridge是否可用[WebViewJavascriptBridge enableLogging];//關聯(lián)webView和bridge_bridge = [WebViewJavascriptBridge bridgeForWebView:web];? ? [_bridge setWebViewDelegate:self];//js給oc傳值.'passValue'為雙方自定義的統(tǒng)一方法名；'data'為JS傳過來的值；'responseCallback'為OC收到值后給JS返回的回調(diào)[_bridge registerHandler:@"passValue"handler:^(iddata, WVJBResponseCallback responseCallback) {//打印js傳過來的值NSLog(@"%@", data);//返回給js的值responseCallback(@"收到了");? ? }];
需要注意的是：不論哪方給哪方傳值，傳值的方法名稱與對應接收值的方法名稱要保持一致。
轉(zhuǎn)載出處? http://blog.csdn.net/leaderqiu/article/details/51955956
