代码下载地址

JavaScriptCore介绍

JavaScriptCore框架其实只是基于webkit中以C/C++实现的JavaScriptCore的一个包装，该框架让Objective-C和JavaScript代码直接的交互变得更加的简单方便，主要由下面几个类组成。

1.JSContext
JS执行的环境，同时也通过JSVirtualMachine管理着所有对象的生命周期，每个JSValue都和JSContext相关联并且强引用context。可以通过[webView valueForKeyPath:@”documentView.webView.mainFrame.javaScriptContext”]来从webview上获取相应的JSContext。

2.JSValue
JS对象在JSVirtualMachine中的一个强引用，其实就是Hybird对象。我们对JS的操作都是通过它。并且每个JSValue都是强引用一个context。同时，OC和JS对象之间的转换也是通过它。

3.JSManagedValue
JS和OC对象的内存管理辅助对象。由于JS内存管理是垃圾回收，并且JS中的对象都是强引用，而OC是引用计数。如果双方相互引用，势必会造成循环引用，而导致内存泄露。我们可以用JSManagedValue保存JSValue来避免。

4.JSVirtualMachine
JS运行的虚拟机，有独立的堆空间和垃圾回收机制。

5.JSExport
一个协议，如果JS对象想直接调用OC对象里面的方法和属性，那么这个OC对象只要实现这个JSExport协议就可以了。

OC调用JS

1.加载JS代码

- (JSValue *)evaluateScript:(NSString *)script;

2.调用JS方法

    JSValue *callBack = self.context[@"callback"];
    [callBack callWithArguments:@[@"大家好！"]];

JS调用OC

1.通过block实现，然后在JS中直接调用方法即可。需要注意的是在Block内都不要直接使用其外部定义的JSContext对象或者JSValue，应该将其当做参数传入到Block中，或者通过JSContext的类方法+ (JSContext *)currentContext;来获得。否则会造成循环引用使得内存无法被正确释放。

    self.context[@"showMessage"] = ^(NSString *message){
        UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
        [alertCtr addAction:cancel];
        //注意：方法是在子线程中执行的，需要跟新UI的话，需要切入主线程。
        dispatch_async(dispatch_get_main_queue(), ^{
            [weakSealf presentViewController:alertCtr animated:YES completion:nil];
        });
    };

2.通过JSExport来实现，JS需要通过OC中注入的对象来调用对应的方法，方法需要在协议中申明，并且在注入的对象中实现。
- 申明协议及协议方法

@protocol JSIneract <JSExport>

- (void)showMessage:(NSString *)message;

@end

准备需注入的OC对象，遵守协议，并实现协议方法

- (void)showMessage:(NSString *)message
{
    NSLog(@"current:%@",[NSThread currentThread]);// 子线程
    dispatch_async(dispatch_get_main_queue(), ^{
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"JS 调用了 OC" message:message preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
        [alert addAction:cancel];
        [self presentViewController:alert animated:YES completion:nil];
    });
}

在webView加载完成的代理方法- (void)webViewDidFinishLoad:(UIWebView *)webView中注入实现协议的OC对象

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    //从webview上获取相应的JSContext。
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    //注入JS需要的“OC”对象
    self.context[@"OC"] = self;
}

实例演示，效果如下

Simulator Screen Shot 2017年6月4日上午11.59.03.png

Simulator Screen Shot 2017年6月4日上午11.59.01.png

Simulator Screen Shot 2017年6月4日上午11.58.52.png

1.编写一段如下的代码到html文件中，在从把文件加载到webView上

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
        function callback(something){
            var target = document.getElementById('result');
            target.innerHTML = something;
        }
</script>
<br/>
<br/>
<div>
    <input type="button" value="用block实现JS调用一个参数或无参数OC方法" onclick="showMessage('我调用了showMessage方法')">
</div>
<div>
    <input type="button" value="用block实现JS调用多参数的OC方法" onclick="showMessageWithTitleAndMessage('这是我传的标题哦！','我调用了showTitleAndMessage方法')">
</div>
<div>
    <input type="button" value="用block实现JS调用OC方法并回调" onclick="doSomethingThenCallBack()">
</div>
<br/>
<br/>
<div>
    <input type="button" value="用代理实现JS调用一个参数或无参数OC方法" onclick="OC.showMessage('are you Objective-C?')">
</div>
<div>
    <input type="button" value="用代理实现JS调用多参数的OC方法" onclick="OC.showMessageWithTitleAndMessage('hellow','world')">
</div>
<div>
    <input type="button" value="用代理实现JS调用OC方法并回调" onclick="OC.doSomethingThenCallBack()">
</div>
<br/>
<br/>
<div>
    <h4>回调结果:</h4>
    <span id="result"></span>
</div>
</body>
</html>

说明：上面代码申明了一个callback的JS方法供OC调用，将参数展示在一个span标签当中。之后声明了六个button来调用不同的iOS的方法，第一个是一个参数或无参数的方法showMessage ,第二个是多参数的方法showMessageWithTitleAndMessage 。
之所以要区分单个参数和多参数的情况，是因为当多个参数时，如iOS端的方法声明是- (void)showMessageWithTitle:(NSString )title andMessage:(NSString )message; 在JS调用时应该将方法名连起来，调整大小写，showMessageWithTitleAndMessage(title, message) 。这六个按钮的点击方法前三个是直接调用，后三个是通过一个名为OC的对象来调用，这个对象需要在iOS中注入。

2.实现OC加载JS代码和OC调用JS方法这两个方法

- (void)loadJSCode:(UIButton *)sender
{
    [self.context evaluateScript:@"alert('你好！');"];
}
- (void)jsFunction:(UIButton *)sender
{
    JSValue *callBack = self.context[@"callback"];
    [callBack callWithArguments:@[@"大家好！"]];
}

3.通过block实现JS调用OC的这几个方法

    __weak typeof(self) weakSealf = self;
    self.context[@"showMessage"] = ^(NSString *message){
        UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
        [alertCtr addAction:cancel];
        //注意：方法是在子线程中执行的，需要跟新UI的话，需要切入主线程。
        dispatch_async(dispatch_get_main_queue(), ^{
            [weakSealf presentViewController:alertCtr animated:YES completion:nil];
        });
    };
    self.context[@"showMessageWithTitleAndMessage"] = ^(NSString *title, NSString *message){
        UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:title message:message preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleCancel handler:nil];
        [alertCtr addAction:cancel];
        dispatch_async(dispatch_get_main_queue(), ^{
            [weakSealf presentViewController:alertCtr animated:YES completion:nil];
        });
    };
    self.context[@"doSomethingThenCallBack"] = ^{
        UIAlertController *alertCtr = [UIAlertController alertControllerWithTitle:@"提示" message:nil preferredStyle:UIAlertControllerStyleAlert];
        [alertCtr addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
            textField.placeholder = @"请输入传入的数据!";
            [textField addTarget:weakSealf action:@selector(textFieldChange:) forControlEvents:UIControlEventEditingChanged];
        }];
        UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
        [alertCtr addAction:cancel];
        UIAlertAction *ok = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
            UITextField *textField = [alertCtr.textFields firstObject];
            JSValue *callback = weakSealf.context[@"callback"];
            [callback callWithArguments:@[textField.text]];callWithArguments:@[textField.text]];
        }];
        [alertCtr addAction:ok];
        ok.enabled = NO;
        dispatch_async(dispatch_get_main_queue(), ^{
            [weakSealf presentViewController:alertCtr animated:YES completion:nil];
        });
    };

4.通过通过JSExport来实现JS调用OC的这几个方法，方法同上面所说的，在这里就不赘述了。

iOS UIWebView与JavaScript交互之JavaScriptCore

代码下载地址

JavaScriptCore介绍

OC调用JS

JS调用OC

实例演示，效果如下

猜你喜欢