序言
在实际开发中，我们避免不了需要和 UIWebView 打交道，这就涉及到 JS 与原生 OC 的交互，今天抽空总结一下 JS 与原生交互使用 JavaScriptCore 方式
JS 调用原生 OC
在iOS 7之后，apple添加了一个新的库JavaScriptCore，用来做JS交互，因此JS与原生OC交互也变得简单了许多。
首先导入JavaScriptCore库, 然后在OC中获取JS的上下文。
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
再然后定义好JS需要调用的方法，例如JS要调用share方法：
则可以在UIWebView加载url完成后，在其代理方法中添加要调用的share方法：
- (void)setupData {
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//定义好JS要调用的方法, share就是调用的share方法名
context[@"share"] = ^() {
NSLog(@"+++++++Begin Log+++++++");
NSArray *args = [JSContext currentArguments];
NSMutableString *strM = [NSMutableString string];
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal.toString);
[strM appendString:jsVal.toString];
}
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"这是OC原生的弹出窗" message:strM delegate:self cancelButtonTitle:@"收到" otherButtonTitles:nil];
[alertView show];
});
NSLog(@"-------End Log-------");
};
}
注意:
- JS 要调用的原生 OC 方法，可以在viewDidLoad wevView 被创建后就添加好，但最好是在网址加载成功后再添加，以避免无法预料的乱入Bug。
- block 中的执行环境是在子线程中。奇怪的是竟然可以更新部分UI，例如给view设置背景色，调用webView执行js等，但是弹出原生alertView就会在控制台报子线程操作UI的错误信息。
- 避免循环引用，因为block 会持有外部变量，而JSContext也会强引用它所有的变量，因此在block中调用self时，要用__weak 转一下。而且在block内不要使用外部的context 以及JSValue，都会导致循环引用。如果要使用context 可以使用
[JSContext currentContext]。当然我们可以将JSContext 和JSValue当做block的参数传进去，这样就可以使用啦。
其中相对应的 HTML 代码如下：
这里是第二种方式
由此可见，JS 部分确实简单多了。
OC 调用 JS
OC 调用 JS 方法有多种，首先介绍使用JavaScriptCore框架的方式。
- 方式一
使用JSContext 的方法-evaluateScript，可以实现 OC 调用 JS 方法
// 法一
- (void)transferJS {
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"showAlert('这里是JS中alert弹出的message')";
[context evaluateScript:textJS];
}
// 法二
- (void)transferJS {
NSString *textJS = @"showAlert('这里是JS中alert弹出的message')";
[[JSContext currentContext] evaluateScript:textJS];
}
- 方式二
使用 JSValue 的方法-callWithArguments，也可以实现 OC 调用 JS 方法
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[context[@"showAlert"] callWithArguments:@[@"这里是JS中alert弹出的message"]];
重点:
stringByEvaluatingJavaScriptFromString是一个同步的方法，使用它执行JS方法时，如果JS 方法比较耗的时候，会造成界面卡顿。尤其是js 弹出alert 的时候。
alert 也会阻塞界面，等待用户响应，而stringByEvaluatingJavaScriptFromString又会等待js执行完毕返回。这就造成了死锁。
官方推荐使用WKWebView的evaluateJavaScript:completionHandler:代替这个方法。
其实我们也有另外一种方式，自定义一个延迟执行alert 的方法来防止阻塞，然后我们调用自定义的alert 方法。同理，耗时较长的js 方法也可以放到setTimeout 中。
function asyncAlert(content) {
setTimeout(function(){
alert(content);
},1);
}
补充
好处：使用JavaScriptCore，JS调用Native方法时，参数的传递更方便，不用担心特殊符号的转换问题。
不好的地方：只能使用在iOS 7以上。
扩展
在 OC 中如何往 JS 环境添加一个变量，便于后续在 JS 中调用？
JSContext *context = [[JSContext alloc] init];
[context evaluateScript:@"var arr = [3, 4, 'abc'];"];
用到实际的 UIWebView 上，可以这样
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[context evaluateScript:@"var arr = [3, 4, 'abc'];"];
当上面两行代码执行完毕后，点击 HTML 中的按钮
function showArr(){
asyncAlert(arr);
}
function asyncAlert(content) {
setTimeout(function(){
alert(content);
},1);
}
直接输出 arr，结果如下
如果我们要在 OC 中想要取出 arr，只需要这样即可
JSValue *value = context[@"arr"];
OC中的block可以传入到JavaScript中，这样就创建了一个新的JS方法。我们上面的JS调用OC方法，就是利用的这个实现的。
关于JSExport如何使用？
JSExport 主要是用于将OC中定义的Model类等引入到JavaScript中，便于在JS中使用这种对象和对象的属性、方法。
JSExport的大致使用流程是：
1.创建一个自定义协议XXXExport 继承自JSExport。
2.在自定义的XXXExport中添加JS里需要调用的属性和方法。
3.在自定义的Model类中实现XXXExport中的属性的get/set方法以及定义的方法。
4.通过JSContext将Model类或者Model类的实例插入到JavaScript中。
当然，我们也可以给已经存在的类动态添加协议，来使其可以供JS 使用。这些示例和示例代码，在文章NSHipster中文版的JavaScriptCore 和 JavaScriptCore框架在iOS7中的对象交互和管理中有很详细的介绍和使用展示。
WKWebView 与JavaScriptCore
关于WKWebView 与JavaScriptCore，由于WKWebView 不支持通过如下的KVC的方式创建JSContext：
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
那么就不能在WKWebView中使用JavaScriptCore了。
而且，WKWebView中有OC 和JS交互的方式，更easy 、更简洁，因此也用不着使用JavaScriptCore。
WKWebView 中 OC 与 JS 交互可以使用 MessageHandler。详情请看下文
iOS下 JS 与 OC 互相调用(四)-MessageHandler
效果展示如下：
项目连接地址-JS_OC_InterceptUrl
本文参考iOS下JS与OC互相调用（四）--JavaScriptCore，非常感谢该作者。
更多 JS 与 OC 交互文章请看下面
iOS下 JS 与OC 互相调用(一) - UIWebView 拦截 URL
iOS 下 JS 与 OC 互相调用(三) - WKWebView 拦截 URL
iOS下JS与OC互相调用(四)-MessageHandler
iOS下 JS 与 OC 互相调用(五) - UIWebView+WebViewJavascriptBridge
iOS下 JS 与 OC 互相调用(六) - WKWebView+WKWebViewJavascriptBridge