iOS下JS與OC互相調用（一）--UIWebView 攔截URL

 

http://blog.csdn.net/u011619283/article/details/52135977

 

最近准備把之前用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不會調用。

示例工程地址：JS_OC_URL