iOS交互－JavaScriptCore

iOS交互一般有两个选择

• JavaScriptCore
• OC调用JavaScript通过webview的stringByEvaluatingJavaScriptFromString:方法调用JavaScript代码；JavaScript调用OC，则是通过web view的代理方法shouldStartLoadWithRequest：来接收JavaScript的网络请求从而实现调用，推荐Marcus Westin的开源框架 WebViewJavascriptBridge。

在ios7之后，苹果开放了JavaScriptCore，让Objective-C和JavaScript代码直接的交互变得更加的简单方便。这里就说说如何使用JavaScriptCore进行交互。

iOS开发使用JavaScriptCore进行交互有两种方式：遵循JSExport协议，使用block。对JavaScriptCore不熟悉的看这篇挺不错的iOS7新JavaScriptCore框架入门介绍

先设定一个交互的使用需求背景：
假如有这样一个需求：点击网页上的按钮，调用本地代码，然后本地代码调用网页js的方法改变按钮样式，点击这里看动图展示。

oc端

• 导入JavaScriptCore
  #import

• JSExport方式：
  继承JSExport协议， 在协议中定义自己的方法，在需要交互的ViewController遵循此协议并实现协议中的方法。该协议的方法会暴露给js调用，也就是网页所调用本地的方法就是协议中的方法。
  下面定义一继承至JSExport的协议，名为jsObjDelegate的协议

@protocol jsObjDelegate 
-(void)test:(NSString *)str;
@end

创建一个类，包含两个个属性。一个是加载网页的webView，另一个是js的运行环境JSContext

@interface webViewController (){
    UIWebView * _webView;
    JSContext * _jsContext;
}

实现协议中的方法

-(void)test:(NSString *)str{
    UIAlertView * al = [[UIAlertView alloc]initWithTitle:@"网页成功调用OC！" message:str delegate:self cancelButtonTitle:@"yes" otherButtonTitles:@"no", nil];
    al.tag = 3001;
    [al show];
}

在viewDidLoad里面vebView加载本地html

    NSURL *fileURL = [[NSBundle mainBundle] URLForResource:@"two.html" withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:fileURL];
    [_webView loadRequest:request];

在vebView加载完成后，获取网页的javaScriptContext属性并保存到_jsContext中，把当前控制器保存到网页的javaScriptContext中，名为“ ctrl”，至此网页用"ctrl"这个对象就能直接调用到协议中的test方法

-(void)webViewDidFinishLoad:(UIWebView *)webView{
    _jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
     //把当前控制器保存到网页中
    _jsContext[@"ctrl"] = self;
    _jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息：%@", exceptionValue);
    };
}

网页调用协议中暴露的test方法
ctrl.test("方式：直接调用 \n是否回调网页方法")

• Block方式
  block方式viewController无需实现jsObjDelegate协议，在加载网页完成时候 向网页中的javaScriptContext注入方法即可。这里注入的方法名为“test2” 。在网页中JS直接调用test2就能进入block里面调用co代码

-(void)webViewDidFinishLoad:(UIWebView *)webView{
    _jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    _jsContext[@"ctrl"] = self;
    _jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息：%@", exceptionValue);
    };
    WS(weakSelf);
    _jsContext[@"test2"]=^(NSString * string){
//        NSArray * arr = [JSContext currentArguments ];
//        JSValue * value = arr[0];
//        NSString * str = [value toString];
//        thread = [NSThread currentThread];
        UIAlertView * al = [[UIAlertView alloc]initWithTitle:@"网页成功调用OC！" message:string delegate:weakSelf cancelButtonTitle:@"yes" otherButtonTitles:@"no", nil];
        al.tag = 3000;
        [al show];
    };
}

网页调用oc中注入的test2方法
test2("方式：block \n是否回调网页方法")

oc调用网页的方法,向js的同一个方法传入不同的参数

-(void)callback{
    JSValue * callback = _jsContext[@"showMessage"];
    [callback callWithArguments:@[@"oc调用html方法 \n是否改变第一个按钮的背景颜色",@(1)]];
}
-(void)callback2{
    JSValue * callback = _jsContext[@"showMessage"];
    [callback callWithArguments:@[@"oc调用html方法  \n是否改变第二个按钮的背景颜色",@(2)]];
}

网页端

这里是完整的js代码，通过jsObjDelegate协议和block方式调用本地代码的调用方式都在这里。

iOS与js的交互