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-------");
    };
}

注意:

  1. JS 要调用的原生 OC 方法,可以在viewDidLoad wevView 被创建后就添加好,但最好是在网址加载成功后再添加,以避免无法预料的乱入Bug。
  2. block 中的执行环境是在子线程中。奇怪的是竟然可以更新部分UI,例如给view设置背景色,调用webView执行js等,但是弹出原生alertView就会在控制台报子线程操作UI的错误信息。
  3. 避免循环引用,因为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,结果如下


iOS下 JS 与OC 互相调用(二) - JavaScriptCore_第1张图片
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中文版的Java​Script​Core 和 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,非常感谢该作者。


更多 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

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

你可能感兴趣的:(iOS下 JS 与OC 互相调用(二) - JavaScriptCore)