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

时间： 2024-12-14 05:47:09

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

iOS下JS与OC互相调用（二）--WKWebView 拦截URL

在第一篇文章 iOS下JS与OC互相调用(一)中讲述了使用UIWebView拦截URL的方式来处理JS与OC交互. 由于UIWebView比较耗内存,性能上不太好,而苹果在iOS 8中推出了WKWebView. 同样的用WKWebView也可以拦截URL,做JS 与OC交互.关于WKWebView与UIWebView的对比,大家请自动百度或者google. WKWebView 拦截URL WKWebView 与 UIWebView 拦截URL 的处理方式基本一样.除了代理方法和WKWebView

转－－iOS下JS与原生OC互相调用

iOS下JS与原生OC互相调用 引言 一直听说WKWebView比UIWebView强大许多,可是一直没有使用到,今天花了点时间看写了个例子,对其API的使用有所了解,为了日后能少走弯路,也为了让大家更容易学习上手,这里写下这篇文章来记录如何使用以及需要注意的地方. 温馨提示:本人在学习使用过程中,确实有此体会,WKWebView的确比UIWebView强大很多,与JS交互的能力显示增强,在加载速度上有所提升. WKWebView新特性 性能.稳定性.功能大幅度提升 允许JavaScript的N

iOS下JS和原生交互，函数互调

现在越来越多的APP都是H5和原生混合开发,这样确实方便快捷,但是H5的部分总避免不了很多与原生的交互,原生调JS函数还比较简单,原生的API函数stringByEvaluatingJavaScriptFromString就可以完成需求,但是JS调原生的函数,系统没有提供API,所以很多人公司都采用标记位的形式完成,我们公司的也不例外,项目开发了很久,原生和JS交互一直是我负责,我们项目这块也要大量的交互操作,随便版本迭代,问题也越来越多,然后就想了很多办法去解决这个问题. 一,我原本的方案,拦

UIWebView的应用和其中的JS与OC间传值

现在有很多的应用已经采用了WebView和html语言结合的开发模式.html5一直很火因为一份代码可以在多个平台上运用啊,效果各不相同都很美观,也越来越有一些公司直接招后台程序员和html5程序员,做完的产品再安卓也能用iOS也能用,不用再招双份的工程师了.应用程序一进去就全是UIWebView,里面发个请求到自己用html5做的页面,这就是一个应用!当然今天的主要不是说html5,是说html语言中JS代码和OC代码之间的传值. 先举例一个简单的用法: 我在模仿网易彩票做到设置页面的 常见问

UIWebView中JS与OC交互 WebViewJavascriptBridge的使用

一.综述 现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式.就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上.在iOS中,app多是通过WebView来加载网页,由于功能需求等原因,代码中少不得要和跟网页交互. 二.原理 在iOS中,本地调用Javascript语言,是通过UIWebView中的实例方法stringByEvaluatingJavaScriptFromString:来实现的,该方法通过字符串对象的形式传入JS代码. [w

ios-UIWebView中js和oc代码的互调

webview是ios中显示远程数据的网页控件,webview能显示的内容很多,MP4.文本.pdf等等: 关于js和oc代码的互相调用 1:oc中调用js代码; >>oc中调用js代码很简单,一个方法:stringByEvaluatingJavaScriptFromString:@“”: >>要执行的js代码方法到字符串中就可以了: 2:js中执行oc的某段代码: >>js中执行oc的代码要通过一个桥梁: 者桥梁就是webview的一个代理方法:(BOOL)webVi

iOS js oc相互调用JavaScriptCore(一)

原址:http://blog.csdn.net/lwjok2007/article/details/47058101 1.普通调用 从iOS7开始 苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了. 下面我们就简单了解一下这个框架 首先我导入framework 方法如下 点击Linked Frameworks and Libraries 的添加后 选择 JavaScriptCore.framework 选中JavaScriptCore.framewor

iOS js oc相互调用（JavaScriptCore）

从iOS7开始 苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了. 下面我们就简单了解一下这个框架 首先我导入framework 方法如下 点击Linked Frameworks and Libraries 的添加后 选择 JavaScriptCore.framework 选中JavaScriptCore.framework后 点击右下角Add 添加完成 好 创建完成之后我们导入一下头文件 #import <JavaScriptCore/JavaScr

转载 iOS js oc相互调用（JavaScriptCore）

iOS js oc相互调用(JavaScriptCore) 从iOS7开始 苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了. 下面我们就简单了解一下这个框架 首先我导入framework 方法如下 点击Linked Frameworks and Libraries 的添加后 选择 JavaScriptCore.framework 选中JavaScriptCore.framework后 点击右下角Add 添加完成 好 创建完成之后我们导入一下头文件 [