iOS下JS與OC互相調(diào)用（一）--UIWebView 攔截URL

最近準(zhǔn)備把之前用UIWebView實(shí)現(xiàn)的JS與原生相互調(diào)用功能，用WKWebView來替換。順便搜索整理了一下JS 與OC 交互的方式，非常之多啊。目前我已知的JS 與 OC 交互的處理方式：

1.在JS 中做一次URL跳轉(zhuǎn)，然后在OC中攔截跳轉(zhuǎn)。（這里分為UIWebView 和 WKWebView兩種，去年因?yàn)檫€要兼容iOS 6，所以沒辦法只能采用UIWebView來做。）

2.利用WKWebView 的MessageHandler。

3.利用系統(tǒng)庫JavaScriptCore，來做相互調(diào)用。（iOS 7推出的）

4.利用第三方庫WebViewJavascriptBridge。

5.利用第三方cordova庫，以前叫PhoneGap。（這是一個(gè)庫平臺(tái)的庫）

6.當(dāng)下盛行的React Native。

我去年也寫過一個(gè)相互調(diào)用的總結(jié)：iOS下JS與原生OC互相調(diào)用(總結(jié))。

寫的比較粗糙，因此準(zhǔn)備新開一個(gè)目錄專題來記錄JS 與原生交互的處理方式。只是記錄JS與OC交互的多種方式，大家可以根據(jù)實(shí)際情況和場景選擇適合自己的方式。

今天就詳細(xì)的介紹一下使用UIWebView攔截URL 的方式來實(shí)現(xiàn)JS與OC 的交互。

為什么不使用第三方庫或者RAC呢？

因?yàn)榫拖嗷フ{(diào)用的接口使用的非常少啊，就那么三兩個(gè)，完全沒必要使用牛刀啊。

UIWebView 攔截URL

我之前就使用的是UIWebView + 攔截URL 的方式實(shí)現(xiàn)的JS與OC 交互。

原因是因?yàn)橐嫒輎OS 6。

1.創(chuàng)建UIWebView，并加載本地HTML。

加載本地HTML的目的是便于自己寫JS調(diào)用做測試，最終肯定還是加載網(wǎng)絡(luò)HTML。

self.webView = [[UIWebViewalloc] initWithFrame:self.view.frame];self.webView.delegate =self;NSURL*htmlURL = [[NSBundlemainBundle] URLForResource:@"index.html"withExtension:nil];//? ? NSURL *htmlURL = [NSURL URLWithString:@"http://www.baidu.com"];NSURLRequest*request = [NSURLRequestrequestWithURL:htmlURL];// 如果不想要webView 的回彈效果self.webView.scrollView.bounces =NO;// UIWebView 滾動(dòng)的比較慢，這里設(shè)置為正常速度self.webView.scrollView.decelerationRate =UIScrollViewDecelerationRateNormal;? ? [self.webView loadRequest:request];? ? [self.view addSubview:self.webView];

本地的HTML里，我定義了幾個(gè)按鈕，來觸發(fā)調(diào)用原生的方法，然后再將執(zhí)行結(jié)果回調(diào)到j(luò)s 里。

// js 就列幾個(gè)比較有代表性的functions:functionloadURL(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);// 發(fā)起請求后這個(gè)iFrame就沒用了，所以把它從dom上移除掉iFrame.parentNode.removeChild(iFrame);? ? iFrame = null;}functionasyncAlert(content){setTimeout(function(){alert(content);? ? ? ? ? ? ? },1);}functionlocationClick(){loadURL("haleyAction://getLocation");}functionsetLocation(location){asyncAlert(location);? ? document.getElementById("returnValue").value = location;}

雖然HTML 內(nèi)容很少，但是還有不少學(xué)問：

1.為什么自定義一個(gè)loadURL方法，不直接使用window.location.href?

答：因?yàn)槿绻?dāng)前網(wǎng)頁正使用window.location.href加載網(wǎng)頁的同時(shí)，調(diào)用window.location.href去調(diào)用OC原生方法，會(huì)導(dǎo)致加載網(wǎng)頁的操作被取消掉。

同樣的，如果連續(xù)使用window.location.href執(zhí)行兩次OC原生調(diào)用，也有可能導(dǎo)致第一次的操作被取消掉。所以我們使用自定義的loadURL，來避免這個(gè)問題。

loadURL的實(shí)現(xiàn)來自關(guān)于UIWebView和PhoneGap的總結(jié)一文。

2.為什么loadURL 中的鏈接，使用統(tǒng)一的scheme?

答:便于在OC 中做攔截處理，減少在JS中調(diào)用一些OC 沒有實(shí)現(xiàn)的方法時(shí)，webView 做跳轉(zhuǎn)。因?yàn)槲以贠C 中攔截URL 時(shí)，根據(jù)scheme (即haleyAction)來區(qū)分是調(diào)用原生的方法還是正常的網(wǎng)頁跳轉(zhuǎn)。然后根據(jù)host（即//后的部分getLocation）來區(qū)分執(zhí)行什么操作。

3.為什么自定義一個(gè)asyncAlert方法？

答：因?yàn)橛械腏S調(diào)用是需要OC 返回結(jié)果到JS的。stringByEvaluatingJavaScriptFromString是一個(gè)同步方法，會(huì)等待js 方法執(zhí)行完成，而彈出的alert 也會(huì)阻塞界面等待用戶響應(yīng)，所以他們可能會(huì)造成死鎖。導(dǎo)致alert 卡死界面。如果回調(diào)的JS 是一個(gè)耗時(shí)的操作，那么建議將耗時(shí)的操作也放入setTimeout的function中。

2.攔截 URL

UIWebView 有一個(gè)代理方法，可以攔截到每一個(gè)鏈接的Request。return YES,webView 就會(huì)加載這個(gè)鏈接；return NO,webView 就不會(huì)加載這個(gè)連接。我們就在這個(gè)攔截的代理方法中處理自己的URL。

這是我的示例代碼：

#pragma mark - UIWebViewDelegate- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{NSURL*URL = request.URL;NSString*scheme = [URL scheme];if([scheme isEqualToString:@"haleyaction"]) {? ? ? ? [selfhandleCustomAction:URL];returnNO;? ? }returnYES;}

這里通過scheme，來攔截掉自定義的URL 就非常容易了，如果不同的方法使用不同的scheme，那么判斷起來就非常的麻煩。

然后，看看我的處理連接的方法：

#pragma mark - private method- (void)handleCustomAction:(NSURL*)URL{NSString*host = [URL host];if([host isEqualToString:@"scanClick"]) {NSLog(@"掃一掃");? ? }elseif([host isEqualToString:@"shareClick"]) {? ? ? ? [selfshare:URL];? ? }elseif([host isEqualToString:@"getLocation"]) {? ? ? ? [selfgetLocation];? ? }elseif([host isEqualToString:@"setColor"]) {? ? ? ? [selfchangeBGColor:URL];? ? }elseif([host isEqualToString:@"payAction"]) {? ? ? ? [selfpayAction:URL];? ? }elseif([host isEqualToString:@"shake"]) {? ? ? ? [selfshakeAction];? ? }elseif([host isEqualToString:@"goBack"]) {? ? ? ? [selfgoBack];? ? }}

順便看一下如何將結(jié)果回調(diào)到JS中：

- (void)getLocation{// 獲取位置信息// 將結(jié)果返回給jsNSString*jsStr = [NSStringstringWithFormat:@"setLocation('%@')",@"廣東省深圳市南山區(qū)學(xué)府路XXXX號"];? ? [self.webView stringByEvaluatingJavaScriptFromString:jsStr];}

當(dāng)然，有時(shí)候我們在JS中調(diào)用OC 方法的時(shí)候，也需要傳參數(shù)到OC 中，怎么傳呢？

就像一個(gè)get 請求一樣，把參數(shù)放在后面：

functionshareClick(){? ? loadURL("haleyAction://shareClick?title=測試分享的標(biāo)題&content=測試分享的內(nèi)容&url=http://www.baidu.com");}

那么如果獲取到這些參數(shù)呢?

所有的參數(shù)都在URL的query中，先通過&將字符串拆分，在通過=把參數(shù)拆分成key 和實(shí)際的值。下面有示例代碼：

- (void)share:(NSURL*)URL{NSArray*params =[URL.query componentsSeparatedByString:@"&"];NSMutableDictionary*tempDic = [NSMutableDictionarydictionary];for(NSString*paramStrinparams) {NSArray*dicArray = [paramStr componentsSeparatedByString:@"="];if(dicArray.count >1) {NSString*decodeValue = [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];? ? ? ? ? ? [tempDic setObject:decodeValue forKey:dicArray[0]];? ? ? ? }? ? }NSString*title = [tempDic objectForKey:@"title"];NSString*content = [tempDic objectForKey:@"content"];NSString*url = [tempDic objectForKey:@"url"];// 在這里執(zhí)行分享的操作// 將分享結(jié)果返回給jsNSString*jsStr = [NSStringstringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];? ? [self.webView stringByEvaluatingJavaScriptFromString:jsStr];}

3. OC調(diào)用JS方法

關(guān)于將OC 執(zhí)行結(jié)果返回給JS 需要注意的是：

如果回調(diào)執(zhí)行的JS 方法帶參數(shù)，而參數(shù)不是字符串時(shí)，不要加單引號,否則可能導(dǎo)致調(diào)用JS 方法失敗。比如我這樣的：

NSData*jsonData = [NSJSONSerializationdataWithJSONObject:userProfile options:NSJSONWritingPrettyPrintederror:nil];NSString*jsonStr = [[NSStringalloc] initWithData:jsonData encoding:NSUTF8StringEncoding];NSString*jsStr = [NSStringstringWithFormat:@"loginResult('%@',%@)",type, jsonStr];[_webView stringByEvaluatingJavaScriptFromString:jsStr];

如果第二個(gè)參數(shù)用單引號包起來，就會(huì)導(dǎo)致JS端的loginResult不會(huì)調(diào)用。

另外，利用[webView stringByEvaluatingJavaScriptFromString:@"var arr = [3, 4, 'abc'];"];,可以往HMTL的JS環(huán)境中插入全局變量、JS方法等。

示例工程地址：JS_OC_URL