原生JS交互（三）—— UIWebView之JavaScript

2018-06-04 本文已影响152人 CoderXLL

系列
原生JS交互（一）—— UIWebView拦截URL
原生JS交互（二）—— WKWebView拦截URL

一、JavaScriptCore

JavaScriptCore是iOS7提供的一个系统动态库，使用前导入#import <JavaScriptCore/JavaScriptCore.h>。
我们点进去可以看到，此框架涉及到下面5个类。

JavaScriptCore框架内部
其中做原生与JS交互时最常用的是JSContext（JS上下文） 与 JSValue（交互时参数媒介类），具体怎么用，下面会介绍。

二、JS实现

与前两篇拦截URL相比，有个明显不同的是，JS可以直接调用原生的方法了。所以button标签的响应function里，不是load一个url，而是调用原生函数。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptCore调用原生</title>
    <script language="javascript">
        /*调用原生function*/
        function testBtnClick() {
           //原生函数
           ocClick('参数1');
        }
        function jsClick() {
              alert('有本事调我啊');
        }
    </script>

</head>
<body>
<button onclick="testBtnClick()">调用原生</button>
</body>
</html>

三、原生注册JS要调用的函数

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//与JS约定好的函数名
context[@"getLala"] = ^() {
        NSArray *args = [JSContext currentArguments];  
        //JS调用时传入的参数
        NSString *title = [args[0] toString];  
        NSLog(@"%@", title);
};

四、原生调用JS

方式1

//将分享结果返回给js
NSString *jsStr = [NSString stringWithFormat:@"jsClick('biubiubiu')"];
[[JSContext currentContext] evaluateScript:jsStr];

方式2

//将分享结果返回给js
[context[@"jsClick"] callWithArguments:@[@"biubiubiu"]];

方式3

NSString *jsStr = [NSString stringWithFormat:@"jsClick('%@')",@"biubiubiu"];
[self.webView stringByEvaluatingJavaScriptFromString:jsStr];

五、 JavaScriptCore的利与弊

利：JavaScriptCore可以通过JS直接调用原生函数，所以相对于拦截URL响应，JS与原生的数据传递更方便。
弊：因为WKWebView不能通过KVC获取JSContext对象，所以原生使用JavaScriptCore做数据交互的时候，就不能用WKWebView去加载H5页面。
参考文章:
Nate Cook对JavaScriptCore的探索（翻译篇）