iOS中JS 与OC的交互(JavaScriptCore.framework)-白红宇

iOS中JS 与OC的交互(JavaScriptCore.framework)

阅读量：5887 次

发布时间：2019-06-19

本文共 5714 字，大约阅读时间需要 19 分钟。

iOS中实现js与oc的交互，目前网上也有不少流行的开源解决方案；

如：react native

当然一些轻量级的任务使用系统提供的UIWebView 以及JavaScriptCore.framework 里面提供的api就能快速满足的。

方式一：iOS6上使用UIWebView 拦截url方式

以下是演示的js和oc端的代码

JAAndOC1        hello world
    hello world
    hello world
    hello world
    START
    SDKHI

View Code

@interface ViewController ()
      
       {    UIWebView *theWeb;}@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        theWeb = [[UIWebView alloc]initWithFrame:self.view.bounds];    theWeb.scalesPageToFit = YES;    theWeb.delegate = self;    [self.view addSubview:theWeb];            //本示例方法适用于iOS 6 +        NSURL *reqUrl = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"js1.html" ofType:nil]];    [theWeb loadRequest:[NSURLRequest requestWithURL:reqUrl]];                    UIButton *clickBtn = [UIButton buttonWithType:UIButtonTypeCustom];    clickBtn.frame = CGRectMake(100, 100, 100, 100);    [clickBtn setTitle:@"clisk" forState:0];    [clickBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];    [self.view addSubview:clickBtn];    [clickBtn addTarget:self action:@selector(clickToCloseAlert) forControlEvents:UIControlEventTouchUpInside];        }//OC调JS 并传参数- (void)clickToCloseAlert{    //在弹出的alert中可能会有来自 xxx.html 字样 （百度去掉）    [theWeb stringByEvaluatingJavaScriptFromString:@"sdkhito('cc')"];}//JS 调 OC 并传参数- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{        //访问如下自定义协议连接    //request.URL   tcsdk://START?name=cc&age=18&phone=10086    //request.URL.scheme   tcsdk 取出协议    //request.URL.host     START 取出host    //request.URL.query name=cc&age=18&phone=10086  取出参数    NSLog(@"%@",request.URL);    NSLog(@"%@",request.URL.scheme);            return YES;}

View Code

1. OC 调用js代码主要通过如下接口

[theWeb stringByEvaluatingJavaScriptFromString:@"sdkhito('cc')"];

流程：iOS的UIWebView 加载包含js的网页；在js中定义好函数接口；

然后在oc上就可以通过上面接口直接调用的；

2. JS 调用OC 主要通过UIWebView的代理方法shouldStartLoadWithRequest 拦截URL

//JS 调 OC 并传参数

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

{

//访问如下自定义协议连接

//request.URL tcsdk://START?name=cc&age=18&phone=10086

//request.URL.scheme tcsdk 取出协议

//request.URL.host START 取出host

//request.URL.query name=cc&age=18&phone=10086 取出参数

NSLog(@"%@",request.URL);

NSLog(@"%@",request.URL.scheme);

return YES;

}

流程：iOS UIWebView 加载包含js的网页；在网页中用<a> 标签名其他跳转方式改变url的操作；

然后在代理中通过拆分url的结构，分别取出协议，host，参数等；来达到js调用oc方法的的目的。

　　问题：通过url传参有限制

方式二：iOS7之后使用 JavaScriptCore.framework

该框架提供完整的js运行环境，在处理oc与js的交互中非常的方法；

如下测试代码

    JAAndOC2                        hello world
        hello world
        hello world
        hello world
                START
        SDKHI
                
              OCHI
        OCHI

View Code

#import "ViewController.h"#import 
      
       #import "Person.h"@interface ViewController ()
       
        {    UIWebView *theWeb;    JSContext *jsCXT;}@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    //以下使用javascriptcore.framewordk        //适用于iOS7.0        theWeb = [[UIWebView alloc]initWithFrame:self.view.bounds];    theWeb.scalesPageToFit = YES;    theWeb.delegate = self;    [self.view addSubview:theWeb];        NSURL *reqUrl = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"js2.html" ofType:nil]];    [theWeb loadRequest:[NSURLRequest requestWithURL:reqUrl]];}- (void)webViewDidFinishLoad:(UIWebView *)webView{    //使用webview的js执行环境    jsCXT = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];        //异常处理    jsCXT.exceptionHandler =    ^(JSContext *context, JSValue *exceptionValue)    {        context.exception = exceptionValue;        NSLog(@"%@", exceptionValue);    };                //OC 调用JS    //[jsCXT[@"sdkhi2"] callWithArguments:nil];    //sdkhito    //[jsCXT[@"sdkhito"] callWithArguments:@[@"aa"]];            //注册一个方法由js调用    jsCXT[@"ocsayhi"] = ^(NSString *name) {        NSLog(@"say hi to %@",name);    };            Person *pp = [[Person alloc]init];    pp.firstName = @"cc";    pp.lastName = @"j";    pp.site = @"baidu.com";    jsCXT[@"pl"] = pp;            [jsCXT evaluateScript:@"alert(pl.fullyName())"];        }

View Code

#import 
      
       #import 
       
        @protocol PersonPtl 
        
         @property (nonatomic,copy)NSString *site;/** 对于多参数的方法，JavaScriptCore的转换方式将Objective-C的方法每个部分都合并在一起，冒号后的字母变为大写并移除冒号。比如下边协议中的方法，在JavaScript调用就是：doFooWithBar(foo, bar);  **/- (NSString *)fullyName;@end@interface Person : NSObject
         
          @property (nonatomic, copy) NSString *firstName;@property (nonatomic, copy) NSString *lastName;@end

View Code

#import "Person.h"@implementation Person@synthesize site;- (NSString *)fullyName{    return [NSString stringWithFormat:@"%@ %@", self.firstName, self.lastName];}@end

View Code

1. OC调用js

流程我们创建UIWebView 在代理中获取当前页面的js环境；就是JSContext

jsCXT = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

　　然后在网页js中定义的方法，在这里我们就可以直接调用了；

//OC 调用JS

[jsCXT[@"sdkhi2"] callWithArguments:nil];

[jsCXT[@"sdkhito"] callWithArguments:@[@"aa"]];

2. JS 调用 OC

这里有两个方式，我们可以通过block的方法在oc里为js 注入一下方法，让js调用

//注册一个方法由js调用

jsCXT[@"ocsayhi"] = ^(NSString *name) {