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

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

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

@interface webViewController ()<jsObjDelegate,UIAlertViewDelegate,UIWebViewDelegate>{
    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方式调用本地代码的调用方式都在这里。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iOS与js的交互</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<h1>iOS与js的交互</hi><br>
<div>
<input  id="btn1" type="button" value="JSExport协议调用oc代码"/><br>
<input  id="btn2" type="button" value="Block调用oc代码"/>
</div>
<script type="text/javascript">
$(function(){
    $("#btn1").bind("click", function(){
        //给btn1绑定事件，ctrl是上面保存的控制器。这里直接调用 jsObjDelegate暴露出来方法
        ctrl.test("方式：直接调用 \n是否回调网页方法")
    }); 
    $("#btn2").bind("click",function(){
      //btn2绑定事件，这里直接调用oc中以block方式注入的方法
        test2("方式：block \n是否回调网页方法")});
})
//根据index的值修改按钮的样式。oc代码会调用该方法
function showMessage(str,index){
    if(index == 1 && confirm(str)){
        $("#btn1").css("background-color","red");
        return;
    }  
    if(confirm(str)){
        $("#btn2").css("background-color","green");
    }
}
</script>
</body>
</html>

iOS交互－JavaScriptCore

oc端

网页端

推荐阅读更多精彩内容