最近準備把之前用UIWebView實現的JS與原生相互呼叫功能，用WKWebView來替換。順便搜尋整理了一下JS 與OC 互動的方式，非常之多啊。目前我已知的JS 與 OC 互動的處理方式：
- 1.在JS 中做一次URL跳轉，然後在OC中攔截跳轉。（這裡分為UIWebView 和 WKWebView兩種，去年因為還要相容iOS 6，所以沒辦法只能採用UIWebView來做。）
- 2.利用WKWebView 的MessageHandler。
- 3.利用系統庫JavaScriptCore，來做相互呼叫。（iOS 7推出的）
- 4.利用第三方庫WebViewJavascriptBridge。
- 5.利用第三方cordova庫，以前叫PhoneGap。（這是一個庫平臺的庫）
- 6.當下盛行的React Native。
我去年也寫過一個相互呼叫的總結：iOS下JS與原生OC互相呼叫(總結)。 寫的比較粗糙，因此準備新開一個目錄專題來記錄JS 與原生互動的處理方式。只是記錄JS與OC互動的多種方式，大家可以根據實際情況和場景選擇適合自己的方式。
今天就詳細的介紹一下使用UIWebView攔截URL 的方式來實現JS與OC 的互動。 為什麼不使用第三方庫或者RAC呢？ 因為就相互呼叫的介面使用的非常少啊，就那麼三兩個，完全沒必要使用牛刀啊。
UIWebView 攔截URL
我之前就使用的是UIWebView + 攔截URL 的方式實現的JS與OC 互動。 原因是因為要相容iOS 6。
1.建立UIWebView，並載入本地HTML。
載入本地HTML的目的是便於自己寫JS呼叫做測試，最終肯定還是載入網路HTML。
self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
self.webView.delegate = self;
NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
// NSURL *htmlURL = [NSURL URLWithString:@"http://www.baidu.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:htmlURL];
// 如果不想要webView 的回彈效果
self.webView.scrollView.bounces = NO;
// UIWebView 滾動的比較慢，這裡設定為正常速度
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
[self.webView loadRequest:request];
[self.view addSubview:self.webView];
複製程式碼本地的HTML裡，我定義了幾個按鈕，來觸發呼叫原生的方法，然後再將執行結果回撥到js 裡。
<input type="button" value="掃一掃" onclick="scanClick()" />
<input type="button" value="獲取定位" onclick="locationClick()" />
<input type="button" value="修改背景色" onclick="colorClick()" />
<input type="button" value="分享" onclick="shareClick()" />
<input type="button" value="支付" onclick="payClick()" />
<input type="button" value="搖一搖" onclick="shake()" />
<input type="button" value="返回" onclick="goBack()" />
// js 就列幾個比較有代表性的functions:
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;
}
function asyncAlert(content) {
setTimeout(function(){
alert(content);
},1);
}
function locationClick() {
loadURL("haleyAction://getLocation");
}
function setLocation(location) {
asyncAlert(location);
document.getElementById("returnValue").value = location;
}
複製程式碼雖然HTML 內容很少，但是還有不少學問：
1.為什麼自定義一個
loadURL方法，不直接使用window.location.href? 答：因為如果當前網頁正使用window.location.href載入網頁的同時，呼叫window.location.href去呼叫OC原生方法，會導致載入網頁的操作被取消掉。 同樣的，如果連續使用window.location.href執行兩次OC原生呼叫，也有可能導致第一次的操作被取消掉。所以我們使用自定義的loadURL，來避免這個問題。loadURL的實現來自關於UIWebView和PhoneGap的總結一文。
2.為什麼loadURL 中的連結，使用統一的scheme? 答:便於在OC 中做攔截處理，減少在JS中呼叫一些OC 沒有實現的方法時，webView 做跳轉。因為我在OC 中攔截URL 時，根據scheme (即
haleyAction)來區分是呼叫原生的方法還是正常的網頁跳轉。然後根據host（即//後的部分getLocation）來區分執行什麼操作。
3.為什麼自定義一個
asyncAlert方法？ 答：因為有的JS呼叫是需要OC 返回結果到JS的。stringByEvaluatingJavaScriptFromString是一個同步方法，會等待js 方法執行完成，而彈出的alert 也會阻塞介面等待使用者響應，所以他們可能會造成死鎖。導致alert 卡死介面。如果回撥的JS 是一個耗時的操作，那麼建議將耗時的操作也放入setTimeout的function中。
2.攔截 URL
UIWebView 有一個代理方法，可以攔截到每一個連結的Request。return YES,webView 就會載入這個連結；return NO,webView 就不會載入這個連線。我們就在這個攔截的代理方法中處理自己的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"]) {
[self handleCustomAction:URL];
return NO;
}
return YES;
}
複製程式碼這裡通過scheme，來攔截掉自定義的URL 就非常容易了，如果不同的方法使用不同的scheme，那麼判斷起來就非常的麻煩。 然後，看看我的處理連線的方法：
#pragma mark - private method
- (void)handleCustomAction:(NSURL *)URL
{
NSString *host = [URL host];
if ([host isEqualToString:@"scanClick"]) {
NSLog(@"掃一掃");
} else if ([host isEqualToString:@"shareClick"]) {
[self share:URL];
} else if ([host isEqualToString:@"getLocation"]) {
[self getLocation];
} else if ([host isEqualToString:@"setColor"]) {
[self changeBGColor:URL];
} else if ([host isEqualToString:@"payAction"]) {
[self payAction:URL];
} else if ([host isEqualToString:@"shake"]) {
[self shakeAction];
} else if ([host isEqualToString:@"goBack"]) {
[self goBack];
}
}
複製程式碼順便看一下如何將結果回撥到JS中：
- (void)getLocation
{
// 獲取位置資訊
// 將結果返回給js
NSString *jsStr = [NSString stringWithFormat:@"setLocation('%@')",@"廣東省深圳市南山區學府路XXXX號"];
[self.webView stringByEvaluatingJavaScriptFromString:jsStr];
}
複製程式碼當然，有時候我們在JS中呼叫OC 方法的時候，也需要傳引數到OC 中，怎麼傳呢？ 就像一個get 請求一樣，把引數放在後面：
function shareClick() {
loadURL("haleyAction://shareClick?title=測試分享的標題&content=測試分享的內容&url=http://www.baidu.com");
}
複製程式碼那麼如果獲取到這些引數呢?
所有的引數都在URL的query中，先通過&將字串拆分，在通過=把引數拆分成key 和實際的值。下面有示例程式碼：
- (void)share:(NSURL *)URL
{
NSArray *params =[URL.query componentsSeparatedByString:@"&"];
NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];
for (NSString *paramStr in params) {
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"];
// 在這裡執行分享的操作
// 將分享結果返回給js
NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView stringByEvaluatingJavaScriptFromString:jsStr];
}
複製程式碼3. OC呼叫JS方法
關於將OC 執行結果返回給JS 需要注意的是：
如果回撥執行的JS 方法帶引數，而引數不是字串時，不要加
單引號,否則可能導致呼叫JS 方法失敗。比如我這樣的：
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:userProfile options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonStr = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
NSString *jsStr = [NSString stringWithFormat:@"loginResult('%@',%@)",type, jsonStr];
[_webView stringByEvaluatingJavaScriptFromString:jsStr];
複製程式碼如果第二個引數用單引號包起來，就會導致JS端的loginResult不會呼叫。
另外，利用[webView stringByEvaluatingJavaScriptFromString:@"var arr = [3, 4, 'abc'];"];,可以往HMTL的JS環境中插入全域性變數、JS方法等。
示例工程地址：JS_OC_URL
如果你下載不了，先回到工程的一級目錄再下載。