美文网首页ios娱乐圈iOS Developer
利用JavaScriptCore实现OC和JS交互

利用JavaScriptCore实现OC和JS交互

作者: 快到碗里来____ | 来源:发表于2017-03-23 13:36 被阅读123次

    JavaScriptCore

    JavaScriptCore是webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境。iOS7后苹果在iPhone平台推出,极大的方便了我们对js的操作。

    首先创建webView,读取本地的html文件
     NSURL* htmlURL = [[NSBundle mainBundle] URLForResource: @"demo" withExtension: @"html"];
    [_webView loadRequest: [NSURLRequest requestWithURL: htmlURL]];
    

    在demo中,我们要实现4种情况

    • JS调用OC
    • JS调用OC并传递参数
    • OC调用JS
    • OC调用JS并传递参数

    html文件中代码如下

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function showAlert(){
            alert('OC call JS with no argument');
        }
        function showAlertWithString(string){
            alert(string);
        }
        function callOCWithArgument() {
            jsCallOCWithArgument('参数1 ','参数2 ','参数3');
        }
        </script>
    </head>
    <body>
        </br>
        </br>
        </br>
        </br>
        <form>
            <button type='button' onclick='callOC()'>jsCallOC</button>
            <button type='button' onclick='callOCWithArgument()'>jsCallOCWithArgument</button>
        </form>
    </body>
    </html>
    
    JS调用OC

    在webView的代理方法webViewDidFinishLoad中

    -(void)webViewDidFinishLoad:(UIWebView *)webView
    {
        
        _context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        __weak typeof(self) weakSelf = self;
        _context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
            weakSelf.context.exception = exception;
        };
        
        //js调用OC
        _context[@"callOC"] = ^() {
            NSArray *args = [JSContext currentArguments];
            for (JSValue *jsVal in args) {
                NSLog(@"%@", jsVal.toString);
            }
            dispatch_async(dispatch_get_main_queue(), ^{
                UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@"arguments" message:@"JS Call OC With No Argument" preferredStyle:UIAlertControllerStyleAlert];
                UIAlertAction * action = [UIAlertAction actionWithTitle:@"Done" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
                    
                }];
                [alertView addAction:action];
                [weakSelf presentViewController:alertView animated:YES completion:nil];
            });
        };
        
        _context[@"jsCallOCWithArgument"] = ^() {
            NSArray *args = [JSContext currentArguments];
            NSMutableString * stirng = [NSMutableString string];
            for (JSValue * value in args) {
                [stirng appendString:value.toString];
            }
            dispatch_async(dispatch_get_main_queue(), ^{
                UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@"arguments" message:stirng preferredStyle:UIAlertControllerStyleAlert];
                UIAlertAction * action = [UIAlertAction actionWithTitle:@"Done" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
                }];
                [alertView addAction:action];
                [weakSelf presentViewController:alertView animated:YES completion:nil];
            });
        };   
    }
    

    我们定义一个block,然后保存到context里面,其实就是转换成了JS中命名为callOC的function。然后我们直接执行这个function,调用的就是我们的block里面的内容了。
    传过来的参数可以通过[JSContext currentArguments]这个array接受,里面是JSValue对象。

    OC调用JS

    初始化两个Button,在点击事件中实现如下方法

    - (IBAction)callJS:(id)sender {
        [_context evaluateScript:@"showAlert()"];
    }
    - (IBAction)callJSWithArguments:(id)sender {
        
        [_context evaluateScript:@"showAlertWithString('OC call JS with arguments')"];
    //    [_context[@"showAlertWithString"] callWithArguments:@[@"OC call JS with arguments"]];
    }
    

    即可实现OC调用JS。

    demo已上传到github,需要的可以看一下。

    相关文章

      网友评论

      本文标题:利用JavaScriptCore实现OC和JS交互

      本文链接:https://www.haomeiwen.com/subject/wpvznttx.html