iOS下 JS 与OC 互相调用(二) - JavaScriptCore

序言

在实际开发中，我们避免不了需要和 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 代码如下：

<html>
    <header>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        
            function secondClick() {
                share('分享的标题','分享的内容','图片地址');
            }
        
        function showAlert(message){
            alert(message);
        }
        
        </script>
    </header>
    
    <body>
        <h2> 这里是第二种方式 </h2>
        <br/>
        <br/>
        <button type="button" onclick="secondClick()">Click Me!</button>
        
    </body>
</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 中的按钮

<input type="button" value="输出arr" onclick="showArr()" />
function showArr(){
     asyncAlert(arr);
}
            
function asyncAlert(content) {
     setTimeout(function(){
               alert(content);
         },1);
}

直接输出 arr，结果如下

show.png

如果我们要在 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_javaScriptCore.gif

项目连接地址-JS_OC_InterceptUrl

本文参考iOS下JS与OC互相调用（四）--JavaScriptCore，非常感谢该作者。

iOS下 JS 与OC 互相调用(二) - JavaScriptCore

序言

JS 调用原生 OC

OC 调用 JS

补充

WKWebView 与JavaScriptCore

生活源于创造，技术源于分享。