iOS下JS与OC互相调用（一）--UIWebView 拦截URL

最近准备把以前用JS与原生相互调用功能整理下。顺便搜索整理了一下JS 与OC 交互的方式，目前我已知的JS 与 OC 交互的处理方式：

1.在JS 中作一次URL跳转，而后在OC中拦截跳转

2.利用WKWebView 的MessageHandler

3.利用系统库JavaScriptCore，来作相互调用（iOS 7推出的）

4.利用第三方库WebViewJavascriptBridge

5.利用第三方库EasyJSWebView（已不更新）

6.利用第三方cordova库，之前叫PhoneGap

7.利用第三方DSBridge，值得推荐.（博客里整理的有，能够去看看）

8.当下火热的React Native（还没整理）

在这里感谢Haley-Wong大神提供资源.

今天就详细的介绍一下使用UIWebView拦截URL 的方式来实现JS与OC 的交互:

建立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，来避免这个问题。

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('%@')",@"广东省深圳市"];
    [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方法等。

demo地址:https://github.com/domanc/JS-OC-URL.git