iOS 开发中OC 与 JS的交互

来源：互联网发布：js 字符串寻找子串编辑：程序博客网时间：2024/05/17 21:26

iOS原生应用和web页面的交互有iOS7之后的JavaScriptCore、拦截协议、第三方框架WebViewJavaScriptBridge、iOS8之后的WKWebView几种方法，这一章我们主要讲解JavaScriptCore和拦截协议这两种办法。WebViewJavaScriptBridge是基于拦截协议进行的封装，使用也不如JavaScriptCore方便本文不做细讲。WKWebView是iOS8之后推出的，还没有成为主流使用，所以本篇文章也不做详细叙述。

Objective-C调用JavaScript代码

// UIWebView的方法- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;// JavaScriptCore中JSContext的方法- (JSValue *)evaluateScript:(NSString *)script;- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL

用这些方法执行复杂的一大段js代码也是没有必要的，在一些场景下还是比较实用的，比如

// 获取当前页面的titleNSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];// 获取当前页面的urlNSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];

JavaScriptCore概述
JavaScriptCore这个框架是iOS7之后苹果推出的，方便了开发者的使用，让web页面和iOS本地原生应用交互起来更加简单。

web前端
在与前端交互过程中，需要与前端开发人员沟通好传值、方法名等，然后移动端做适配。这里以传值、调用本地alert、分享为例来讲解，用webView加载HTML文件,这里用的是本地HTML名字为JavaScriptCore.html，代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title> 来自html中的jsCallOC标题</title></head><body><div style="margin-top: 20px"><h2>JavaScript与OC的交互</h2><input type="button" value="Native传值" onclick="Native.callme('jS开始调用OC本地Native咯')"></div><div><input type="button" value="oc原生Alert" onclick="deliverValue('来自HTML中的Alert信息')"></div><div><input type="button" value="Share"   onclick="callShare()"></div><script>var alertShowIn = function(str) {    alert(str);}var callShare = function() {var shareUrl = "http://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&ie=utf-8&in=24401&cl=2&lm=-1&st=-1&step_word=&rn=1&cs=&ln=1998&fmq=1402900904181_R&ic=0&s=&se=1&sme=0&tab=&width=&height=&face=0&is=&istype=2&ist=&jit=&fr=ala&ala=1&alatpl=others&pos=1&pn=1&word=图片%20动漫卡通&di=0&os=1199087710,2399135616&pi=0&objurl=http%3A%2F%2Fv.flash.beijingww.com%2Fcomic%2Fwallpaper%2Fjiqimao%2F15.jpg"Native.share(shareUrl);}var shareCallBack = function(){alert('回调js分享success');}</script></body></html>

JavaScriptCore.html代码解释如下：

Native是iOS本地要注入的一个对象，也就是web页面与原生应用的一个桥接。页面上定义了Native传值、oc原生Alert、Share三个按钮，点击Native传值首先通过Native这个桥梁调用本地的方法- (void)callme:(NSString )string并传入参数；点击oc原生Alert按钮通过 self.context[@"deliverValue"] = ^(NSString message) 的block形式直接调用；点击Share按钮会先调用html本地文件中的JavaScrip的function方法callShare，这里将分享的url参数传给share方法，然后再通过Native桥梁去调用原生应用的本地方法- (void)share:(NSString *)shareUrl，而shareCallBack为分享成功的回调方法，也就是原生方法调用后js的回调方法。

iOS移动端
JavaScriptCore中web页面调用原生应用的方法可以用Delegate或Block两种方法。

JavaScriptCore中类及协议：

JSContext：给JavaScript提供运行的上下文环境
JSValue：JavaScript和Objective-C数据和方法的桥梁
JSExport：协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议

ViewController中的代码

#import <JavaScriptCore/JavaScriptCore.h>@protocol JSObjectDelegate <JSExport>-(void)callme:(NSString *)string;-(void)share:(NSString *)shareUrl;@end@interface JSCallOCViewController ()   <UIWebViewDelegate, JSObjectDelegate>@property(nonatomic, strong) UIWebView *webView;@property(nonatomic, strong) JSContext *context;@end@implementation JSCallOCViewController-(void)viewDidLoad{[super viewDidLoad];// Do any additional setup after loading the view from its nib.self.title = @"js call oc";self.view.backgroundColor = [UIColor whiteColor];self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];[self.view addSubview:self.webView];NSString *path = [[NSBundle mainBundle] pathForResource:@"JavaScriptCore" ofType:@"html"];NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];self.webView.delegate = self;[self.webView loadRequest:request];}#pragma mark - UIWebViewDelegate-(void)webViewDidFinishLoad:(UIWebView *)webView

{
//获取html title设置导航栏 title
self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//捕捉异常回调
self.context.exceptionHandler = ^(JSContext context, JSValue exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息: %@",exceptionValue);
};

//通过JSExport协议关联Native的方法self.context[@"Native"] = self;//通过block形式关联JavaScript中的函数__weak typeof(self) weakSelf = self;self.context[@"deliverValue"] = ^(NSString *message) {    __strong typeof(self) strongSelf = weakSelf;    dispatch_async(dispatch_get_main_queue(), ^{        UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"this is a message" message:message preferredStyle:UIAlertControllerStyleActionSheet];        UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {        }];        [alertControl addAction:cancelAction];        [strongSelf.navigationController presentViewController:alertControl animated:YES completion:nil];    });};

}

-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{NSLog(@"error == %@",error);}#pragma mark - JSExport Methods-(void)callme:(NSString *)string{NSLog(@"%@",string);}-(void)share:(NSString *)shareUrl{NSLog(@"分享的url=%@",shareUrl);JSValue *shareCallBack = self.context[@"shareCallBack"];[shareCallBack callWithArguments:nil];}

代码解释：
自定义JSObjectDelegate协议的时候必须遵守JSExport这个协议，这些自定义的协议中的方法是留给web页面的接口方法。在webView加载完毕的时候获取JavaScript运行的上下文环境，然后注入桥接的对象Native，对象self就是此控制器，控制器遵守此自定义协议实现协议中的相对应的方法。当JavaStript调用完原生本地应用的方法后，再回调JavaScript中对应的方法，从而实现了Web页面和原生本地应用之前的通信。

OC调用JS效果图：

屏幕快照 2016-09-22 下午3.17.26.png

JS调用OC代码

-(void)caculateButtonAction:(id)sender{NSNumber *inputNumber = [NSNumber numberWithInteger:[textField.text integerValue]];JSValue *function = [self.context objectForKeyedSubscript:@"factorial"];JSValue *result = [function callWithArguments:@[inputNumber]];resultL.text = [NSString stringWithFormat:@"%@",[result toNumber]];

JS调用OC效果图：

屏幕快照 2016-09-22 下午3.28.39.png

ps：注意JavaStript调用本地方法是在子线程中执行的，在回调JavaStript方法的时候最好与刚开始调用此方法的线程保持同一个，要考虑线程之间的切换。

拦截协议

<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><div>    <input type="button" value="changeWindow" onclick="callMethod()"></div><script>function callMethod() {    window.location.href = 'wjika://changeWindow';}</script></body></html>

html代码解释:
点击changeWindow按钮调用网页callMethod方法，方法的实现是window.location.href改变主窗口的指向，也就是发出一个链接为wjika://changeWindow的请求，从而将内容传递给原生应用，请求中可以传递原生应用需要的参数。在原生应用中我们可以拦截这个请求，根据内容去判断JavaStript想要我们做的事情，这就实现了web页面和原生应用本地之间的交互。

viewController中的代码

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{NSString *url = request.URL.absoluteString;if ([url rangeOfString:@"wjika://"].location != NSNotFound) {     // url的协议头是wjika    NSLog(@"改变窗口指向");    return YES;}return No;}

在webView的shouldStartLoadWithRequest代理方法中去拦截自定义的协议wjika://如果是此协议则去做JavaStript想要移动端做的事情，调用原生应用的方法，注意协议的头等字段是前端和移动端事先约定好的。

ps：拦截协议适合一些简单的情况，复杂的交互需要相互传递参数的比较麻烦，并且不能回调JavaScript的方法。另外研究拦截协议的朋友可以看看WebViewJavaScriptBridge这个第三方，是对拦截协议的封装。 JavaScriptCore使用起来比较简单，方便web端和移动端的统一。iOS8推出的WKWebView会逐渐成为主流,这个功能更强大。仅供交流学习，欢迎各位同学指正。
Ps:本文项目demo https://github.com/maying1992/iOS-JavaScriptCore.git

0 0