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

標籤：lua   速度   span   sage   --   table   alt   tree   form   

 

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];

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

本地的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;}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

雖然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;}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

這裡通過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];    }}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

順便看一下如何將結果回調到JS中：

- (void)getLocation{    // 擷取位置資訊        // 將結果返回給js    NSString *jsStr = [NSString stringWithFormat:@"setLocation(‘%@‘)",@"廣東省深圳市南山區學府路XXXX號"];    [self.webView stringByEvaluatingJavaScriptFromString:jsStr];}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

當然，有時候我們在JS中調用OC 方法的時候，也需要傳參數到OC 中，怎麼傳呢？ 
就像一個get 請求一樣，把參數放在後面：

function shareClick() {    loadURL("haleyAction://shareClick?title=測試分享的標題&content=測試分享的內容&url=http://www.baidu.com");}

• 1
• 2
• 3

• 1
• 2
• 3

那麼如果擷取到這些參數呢? 
所有的參數都在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];}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

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];

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

如果第二個參數用單引號包起來，就會導致JS端的loginResult不會調用。

樣本工程地址：JS_OC_URL

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