iOS与H5的交互-JavaScriptCore框架

JavaScriptCore框架主要是用来实现iOS与H5的交互。由于现在混合编程越来越多,H5的相对讲多,所以研究JavaScriptCore框架是相当有必要的。

一、JavaScriptCore框架几个常用的类


首先导入JavaScriptCore框架:

#import <JavaScriptCore/JavaScriptCore.h>

JavaScriptCore框架对外暴露的类非常少,只有5个类,分别是JSContext,JSValue,JSManagedValue,JSVirtualMachine,JSExport,其中最核心的是JSContext和JSValue。

JSContext是JavaScript的运行上下文,他主要作用是执行js代码和注册native方法接口;JSValue是JSContext执行后的返回结果,他可以是任何js类型(比如基本数据类型和函数类型,对象类型等),并且都有对象的方法转换为native对象;JSManagedValue是JSValue的封装,用它可以解决js和原声代码之间循环引用的问题;JSVirtualMachine 管理JS运行时和管理js暴露的native对象的内存;JSExport是一个协议,通过实现它可以完成把一个native对象暴漏给js。

下面具体介绍一下5个类:

JSContext:

JSContext代表一个JavaScript的执行环境的一个实例。所有JavaScript执行都是在上下文内进行,上下文可以理解为Object-c和JavaScript的连接桥梁。JSContext对象就是JavaScript代码执行的环境,也可以理解为作用域(也就是所有的JavaScript执行操作都将在JSContext中发生)。

JSContext也用于管理JavaScript虚拟机中对象的生命周期,每一个JSValue实例都将与JSContext通过强引用相关联。只要JSValue存在,JSContext就会保持引用,当JSContext中所有的JSValue被释放掉,那么JSContext也将会被释放,除非之前有被retained。

JSValue:

JSValue可以说是JavaScript和Object-C或Swift之间数据互换的桥梁。为了在原生代码(native code)和JavaScript代码之间传递数据,JSContext里的不同的Javascript值都可以封装在JSValue的对象里,包括字符串、数值、数组、函数等,甚至还有Error以及null和undefined。我们也可以使用JSValue创建JavaScript对象来包装原生自定义类中的对象,或者通过原生的方法或block来提供JavaScript函数的实现。

每一个JSValue实例都是来自于JSContext,JSValue则包含了对context对象的强应用,这点需要特别注意,如果不注意可能会造成内存泄露。当我们通过JSValue调用方法时,返回的新JSValue跟之前的JSValue是属于同一个context的。

JSValue的主要作用就是用来接收JSContext执行后的返回结果,JSValue可以是js的任意类型,例如,js中的变量、对象以及函数。例如我们需要从JSContext对象中接收到一个变量。

首先在标签中我们定义了一个字符串变量:

<script type="text/javascript">

        var myObject = "myObjectString";

</script>

在OC代码中(其中self.context代表着已经初始化完成的JSContext对象):

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

      JSValue *myObject = self.context[@"myObject"];

}

如果需要在OC中使用JSValue对象,需要适当的转换一下类型,框架提供了很多方法。上面的例子打印如下:

NSLog(@"%@",[myObject toString]);

JSManagedValue:

JSManagedValue是JSValue的封装,用它可以解决JS和OC代码之间循环引用的问题,JSManagedValue最常用的用法就是安全的从内存堆区里面引用JSValue对象。如果JSValue存储在内存的堆区的方式是不正确的,很容易造成循环引用,然后导致JSContext对象不能正确的释放掉。

不要在需要被暴露给JavaScript的原生对象中存储一个non-managed JSValue。因为JSValue对象将引用JSContext对象,这种行为将导致循环引用,阻止context被释放。

JSVirtualMachine:

一个JSVirtualMachine对象其实代表着一个JavaScript对象空间或者一组执行资源。使用这个类有两个目的:支持JavaScript并发执行、为JavaScript与Objective-C或Swift的过渡添加管理内存对象。

JSExport:

这是一个协议而不是对象。正如名字含义一样,我们可以使用这个协议暴露原生对象,实例方法,类方法,和属性给JavaScript,这样JavaScript就可以调用相关暴露的方法和属性。遵守JSExport协议,就可以定义我们自己的协议,在协议中声明的API都会在JS中暴露出来。

我们把一个native对象暴漏给JS,指定native对象,比如我们指定native对象就是自身:

self.context[@"native"] = self;

默认情况下,OC类的所有方法和属性都不会被暴露给JavaScript,所以必须要选择要暴露的方法和属性。对于类遵守的任意协议(protocol),如果该协议包含了JSExport协议,则JavaScriptCore就会认为这个该协议中包含的方法和属性列表是暴露给JavaScript的。这个时候,我们才能在JavaScript调用OC类的exported的方法和属性。

二、JavaScriptCore中JSContext对象的初始化


在进行iOS与H5的交互之前,我们需要做的是对JSContext对象进行初始化的设置,是在webView的- (void)webViewDidFinishLoad:(UIWebView *)webView这个代理方法中进行的,前提是需要对webView进行初始化以及设置代理。下面是对JSContext对象进行初始化设置:

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

      //对JSContext对象进行初始化

      self.context = [webView       valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

      //验证JSContext对象是否初始化成功

      self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue)

      {

            context.exception = exceptionValue;

      };

}

三、JavaScript调取OC代码


JavaScript调取OC代码主要有两种方式,一种是使用block,另外一种是使用JSExport协议。

block方式

block方式比较简单,但是要注意防止循环引用。

1.不带参数的函数调用(不需要从网页那边有参数的传值),如下:

HTML文件中<body>标签代码:

<button onclick="myAction();" style="">点击按钮返回上一个页面</button>

OC中在- (void)webViewDidFinishLoad:(UIWebView *)webView方法中对block块进行代码实现:

  __weak typeof(self)temp = self;

self.context[@"myAction"] = ^(){    

        [temp.navigationController popViewControllerAnimated:YES];  

};

2.带参数的函数调用,通过页面的传值,把H5标签的值作为参数进行传值操作,并且调用OC的block进行打印:

HTML文件中的<body>标签代码(一个输入框,一个按钮):

<input type="text" id="param" placeholder="请输入要传的值" />

<button onclick="textStr(document.getElementById('param').value);">打印传值信息</button>

在OC的代码中实现以下block函数,其中string参数就是网页中传过来的值:

self.context[@"log"] = ^(NSString *string){

      NSLog(@"%@",string);

};

JSExport协议方式

通过实现JSExport协议方式进行OC与JS的交互,没有参数的函数调用:

我们在HTML文件中创建一个按钮用来调用OC中JSExport协议方法:

<button onclick="native.myPrint();">调用oc的myLog方法</button>

把native对象指定为当前控制器,也就是自己。在- (void)webViewDidFinishLoad:(UIWebView *)webView方法中实现:

self.context[@"native"] = self;

写一个继承于JSExport的协议:

@protocol WebExportJSExportAs

(myPrint ,

- (void)myPrint :(NSString *)string

);

@end

说明:myPrint是函数名称,- (void)myPrint :(NSString *)string是OC的协议方法,Selector必须要有参数

让当前的控制器遵守协议<WebExport>,实现代理方法:

- (void)myPrint :(NSString *)string{

NSLog(@"通过实现JSExport协议方式进行OC与JS的交互");

}

四、OC调用JavaScript函数

在HTML文件创建一个带有id的标签和一个JavaScript函数:

<b id="changeLabel">通过OC改变改标签文字</b>

<script type="text/javascript">

        function changeLabelAction(obj) {

                document.getElementById('changeLabel').innerHTML = obj;

        }

</script>

OC代码,在OC中添加按钮,点击方法-(void)btnDidClick,在此方法实现:

//通过JSContext对象获取到JS中的对应函数并且使用JSValue对象进行接收

JSValue *changeLabelAction = self.context[@"changeLabelAction"];

//通过使用- (JSValue *)callWithArguments:(NSArray *)arguments;进行JS函数的调用

[changeLabelAction callWithArguments:@[@"OC调用JavaScript函数"]];

推荐阅读更多精彩内容