iOS 开发与H5交互(JavaScriptCore框架的使用)

现在的iOS项目中嵌入了越来越多的Web界面，当然是为了方便，那么为了迎合这一趋势，作为iOS开发程序员，我们必须要了解怎么样用OC去和这些Web界面进行交互。这里介绍的是JavaScriptCore这个框架，他就是苹果为了解决这一问题而推出的框架。

JavaScriptCore的类说明

在做OC与H5的交互之前，我们需要先导入JavaScriptCore框架

#import <JavaScriptCore/JavaScriptCore.h>

然后我们进入到JavaScriptCore框架的JavaScriptCore.h，我们发现总共有如下几个类。

#if defined(__OBJC__) && JSC_OBJC_API_ENABLED

#import "JSContext.h"

#import "JSValue.h"

#import "JSManagedValue.h"

#import "JSVirtualMachine.h"

#import "JSExport.h"

#endif

1. JSContext

JSContext 代表一个JavaScript的执行环境的一个实例。所有的JavaScript执行都是在上下文内。作为上下文，我们在很多情况下遇到过，比如CoreData,CoreGraphics等等,那么上下文对象到底是什么呢?你可以理解为是一个两者的连接桥梁,如图所示.

2.JSValue

JSValue的主要作用就是用来接收JSContext执行后的返回结果，当然了，JSValue可以是Js的任意类型。例如，JS中的变量，对象，以及函数。下面，我们举个例子来说明一下，例如我们现在需要从JSContext对象中接收到一个变量，我们可以如下所示。

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

  <script type="text/javascript">

        var myObject = "myObject";

    </script>

然后，我们在OC的代码中如下表示，其中self.context代表着已经初始化完成的JSContext对象。

JSContext 对象的创建有两种方法

/*使用这个方法进行初始化 系统会自动创建一个JSVirtualMachine对象 然后 调用下面的方法 */
- (instancetype)init;

/*!

JSVirtualMachine对象其实代表着一个JavaScript对象空间或者一组执行资源。初始化只需要init 就行了

*/

- (instancetype)initWithVirtualMachine:(JSVirtualMachine *)virtualMachine;

当然如果你使用了WebView 你可以这样初始化一个JSContext对象

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

有了JSContext，我们只需要在OC中写出下面的代码，就可以拿到我们在JS中定义的变量了

JSValue *value = self.context[@"myObject"];
//转换为OC的字符串
NSLog(@"%@",[value toString]);

3.JSManagedValue

JSManagedValue这个类其实到现在我还没有具体用到过.当时这里我也要根据API文档说明一下.JSManagedValue是JSValue的封装，用它可以解决JS和OC代码之间循环引用的问题,JSManagedValue最常用的用法就是安全的从内存堆区里面引用JSValue对象.如果JSValue存储在内存的堆区的方式是不正确的,很容易造成循环引用,然后导致JSContext对象不能正确的释放掉.

4.JSValueMachine

一个JSVirtualMachine对象其实代表着一个JavaScript对象空间或者一组执行资源。JSVirtualMachine支持线程安全锁,虚拟机,并发分配支持的JavaScript执行.也就说JSVirtualMachine用来管理整个JavaScript,当然了,这个类我也没有用到过.

5.JSExport

JSExport是一个协议,通过实现它可以完成把一个native对象暴漏给JS,当然了我们要指定native对象.比如我们指定native对象就是自身.如下所示.

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

JavaScript 调取 OC的代码

那么我们怎么使用JavaScriptCore 进行JS与OC的交互呢，我们先来介绍JS调取OC的代码的方法。主要有两种方法：一种是很简单的直接使用Block，另一种是使用JSExport协议。

Block方式

block的方式比较简单，也是我比较推荐的一种，但是要注意防止循环引用问题。首先我们说一下不带参数的函数调用，也就是我们不需要从网页那边有参数的传值。比如，页面跳转等等，代码如下：

HTML文件中的<body>标签中的按钮代码

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

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

__weak typeof(self)weakSelf = self;

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

        [weakSelf.navigationController popViewControllerAnimated:YES];

    };

这样当你点击Web页面上的按钮的时候，就会执行block中的代码。进行页面跳转。

接下来我们看一下，通过页面的传值，我们把H5标签的之作为参数进行传值操作。并且调用OC的block进行打印。

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

<body bgcolor="antiquewhite">

        <!--&lt;!&ndash;打开本地 或者网页&ndash;&gt;-->

        <!--<a href="news.html" target="_top">打开本地</a>-->

        <!--<h1 align="center">标题一</h1>-->

        <!--<h2 class="h2ID">标题2</h2>-->

        <button type="button" onclick="buttonClick('你好','世界')">点击按钮返回上一个页面</button>

        <script type="text/javascript">

            function buttonClick(str1,str2) {

                alert(str1 + "---" + str2);

            }

        </script>

    </body>

OC调用这个block中的代码有两种方法

- (void)webViewDidFinishLoad:(UIWebView *)webView {

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

    //第一种方法

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

//        //获取该方法的所有参数

//        NSArray *args = [JSContext currentArguments];

//        for (JSValue *arg in args) {

//            NSLog(@"%@",arg);

//        }

//

//    };

    //第二种方法

    self.context[@"buttonClick"] = ^(NSString *str1,NSString *str2) {

        NSLog(@"%@ and %@",str1,str2);

    };

}

点击按钮可以看到打印结果你好世界

JSExport 协议方式

通过实现JSExport协议方式进行OC与JS的交互,这里我只是简单的实现以下没有参数的函数调用.首先,我们在HTML文件中创建一个按钮用来调用OC中JSExport协议方法.

声明一个person类

.h

#import <Foundation/Foundation.h>

#import <JavaScriptCore/JavaScriptCore.h>

@protocol webJsExport <JSExport>

- (void) myButtonClick;

@end

@interface Person : NSObject<webJsExport>

@end

.m

#import "Person.h"

@implementation Person

- (void)myButtonClick {

    NSLog(@"再来一次");

}

@end

HTML

<button type="button" onclick="stu.myButtonClick()">JSExport没有参数</button>

调用

- (void)viewDidLoad {

    [super viewDidLoad];

    self.p = [[Person alloc] init];

    self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , self.view.frame.size.width, self.view.frame.size.height)];

    self.webView.delegate = self;

    NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

    NSString *path = [[NSBundle mainBundle] pathForResource:@"Index" ofType:@"html"];

    NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

    [self.webView loadHTMLString:html baseURL:baseURL];

    [self.view addSubview:self.webView];

//    self.context = [[JSContext alloc] init];

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

//    //转换为OC的字符串

//    NSLog(@"%@",[value toString]);

//    __weak typeof(self)weakSelf = self;

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

//        [weakSelf.navigationController popViewControllerAnimated:YES];

//    };

}

- (void)webViewDidFinishLoad:(UIWebView *)webView {

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

    //第一种方法

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

//        //获取该方法的所有参数

//        NSArray *args = [JSContext currentArguments];

//        for (JSValue *arg in args) {

//            NSLog(@"%@",arg);

//        }

//

//    };

    //第二种方法

    self.context[@"buttonClick"] = ^(NSString *str1,NSString *str2) {

        NSLog(@"%@ and %@",str1,str2);

    };

    self.context[@"stu"] = self.p;

}

点击JSExport没有参数会打印:在来一次

OC调用JavaScript函数

今天我们说一下如何使用JavaScriptCore让OC调用JavaScript函数,使用JavaScriptCore进行OC调用JavaScript函数是很容易进行传值操作的.首先我们需要在HTML文件创建爱你一个带有id的标签以及一个JavaScript函数.代码如下所示.

HTML代码

 <b id="label">需要改变的标签</b>

    <script type="text/javascript">

        function labelAction(obj) {

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

        }

    </script>

然后就是OC中的代码了

下面就是实现方法,首先我们要先通过JSContext对象获取到JS中的对应函数并且使用JSValue对象进行接收.然后我们通过使用- (JSValue *)callWithArguments:(NSArray *)arguments;进行JS函数的调用,当然了这里的JS函数没有返回值,我也就没有做接收返回值的工作.

-(void)changeWebTxet{

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

    [labelAction callWithArguments:@[@"你好,JS世界!"]];

}

通过上面的介绍，我们可以看出来使用JavaScriptCore 来进行OC与H5 的交互是很方便的，比以前通过WebView的一些方法交互方便多了。