oc与JS的交互实现方式有很多，在ios7之前用的比较多的是WebViewJavaScriptBridge，在ios7之后苹果将JavaScriptCore框架开放，这样就增加一种选择。
1、准备工作
首先要导入JavaScriptCore的头文件
#import <JavaScriptCore/JavaScriptCore.h>
2、用webview加载HTML文件，这里用的是本地html
- (void)viewDidLoad { [super viewDidLoad]; NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"JSCallOC.html"]; NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]; [self.webView loadRequest:request]; }
3、在进行JS交互之前，需要通过JSContent创建一个使用JS的环境
- (void)webViewDidFinishLoad:(UIWebView *)webView { // Undocumented access to UIWebView‘s JSContext self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; // 打印异常 self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) { context.exception = exceptionValue; NSLog(@"%@", exceptionValue); }; }
4、JS调用OC代码
4.1、通过block调用
<input type="button" value="测试log" onclick="log(‘测试‘);" />
self.context[@"log"] = ^(NSString *str) { NSLog(@"%@", str); };
4.2、实现JSExport协议
定义需要暴露给JS的内容
<input type="button" value="计算阶乘" onclick="native.calculateForJS(input.value);" />
@protocol TestJSExport <JSExport> JSExportAs (calculateForJS , - (void)handleFactorialCalculateWithNumber:(NSNumber *)number ); @end
// 以 JSExport 协议关联 native 的方法 self.content[@"native"] = self;
5、OC调用JS代码
在OC中，所有表示JS中对象，都用JSValue来创建，通过objectForKeyedSubscript方法或者直接使用下标的方法获取JS对象，然后使用callWithArguments方法来执行函数。
// 方法一. JSValue *function = [self.context objectForKeyedSubscript:@"factorial"]; // 方法二. JSValue * function = self.context[@"factorial"]; JSValue *result = [function callWithArguments:@[inputNumber]]; self.showLable.text = [NSString stringWithFormat:@"%@", [result toNumber]];
一个demon连接：https://github.com/shaojiankui/JavaScriptCore-Demo
6、封装
将javascriptcore进行封装，更方便ios 和 前端进行数据的交互和方法的调用，使用方式和webviewjavascriptbridge一样，先在plist文件配置，对外暴露的oc接口需要实现指定的协议。
demo:https://github.com/HZQuan/WebViewJavaScriptCoreBridge