iOS OC与JavaScript的交互
概念了解
JavaScriptCore
javaScriptCore是iOS7后推出的框架，是封装了JavaScript和Objective-C桥接的Objective-C API，我们只需要只要用很少的代码，就可以做到JavaScript调用Objective-C，或者Objective-C调用JavaScript。
JavaScriptCore中类及协议
- JSManagedValue:管理数据和方法的类
- JSContent:JS执行的环境
- JSValue:JS和OC数据和方法的桥梁
- JSVirtualMachine:处理线程相关，使用较少
- JSExport:这是一个协议，如果JS对象想直接调用OC对象里面的方法和属性，那么这个OC对象只要实现这个JSExport协议就可以了。
代码示例
我们先用终端创建个html文件拖入工程
test.html中代码如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<title>JSCallOC</title>
<style>
*
{
//-webkit-tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
}
html,body
{
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
#div-a
{
background:#FBA;
color:#FFF;
border-radius: 25px 5px;
}
</style>
<script type="text/javascript">
function showResult(resultNumber)
{
//alert(resultNumber);
document.getElementById("result").innerText = resultNumber;
}
function picCallBack(image) {
alert(image);
}
</script>
</head>
<body style="background:#CDE; color:#FFF">
<div>
<font size="3" color="black">输入一个整数：</font>
<textarea id="input" style="font-size:10pt;color:black;"></textarea>
</div>
<br/>
<div>
<font size="3" color="black">结果： <b id="result"> </b> </font>
</div>
<br/>
<div id="div-a">
<center>
<br/>
<input type="button" value="计算阶乘" onclick="native.calculateForJS(input.value);" />
<br/>
<br/>
<input type="button" value="测试log" onclick="log('测试');" />
<br/>
<br/>
<input type="button" value="oc原生Alert" onclick="alert('alert');" />
<br/>
<br/>
<input type="button" value="addSubView" onclick="addSubView('view');" />
<br/>
<br/>
<input type="button" value="removeSubView" onclick="removeSubView('view');" />
<br/>
<br/>
<input type="button" value="多参数调用" onclick="mutiParams('参数1','参数2','参数3');" />
<br/>
<br/>
<input type="button" value="获取照片" onclick="native.callCamera()" />
<br/>
<br/>
<a id="push" href="#" onclick="native.pushViewControllerTitle('SecondViewController','secondPushedFromJS');">
push to second ViewController
</a>
<br/>
<br/>
</center>
</div>
</body>
</html>
运行效果图
整个页面均为HTML实现，功能为：
1 计算阶乘：输入框输入数字后调用OC中相关方法进行计算，将计算结果显示在HTML页面上。
2 测试log：点击后，在控制台打印测试数据。
3 OC原生Alert：点击后，弹出OC的提示框。
4 addSubView：点击后，在OC中添加一个View.
5 removeSubView: 点击后，移除4中添加的View。
6 多函数调用： 获取HTML中的多个参数
7 获取照片：访问手机照片，并将选中照片显示在HTML页面上
8 push to Second View Controller:跳转到下一个页面。
总结：以上功能都是OC中获取HTML按钮中的相关点击事件，然后在OC中执行相关代码。
ViewController.m中代码如下
#import "OneViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
#import "SecondViewController.h"
@protocol TestJSExport <JSExport>
/*
OC的函数命名和JS函数命名规则不同 我们可以通过JSExportAs这个宏优化JS中调用的名称
这个宏只对有参数的selector起作用
handleFactorialCalculateWithNumber:(NSNumber *)number作为 js方法:calculateForJS的别名*/
JSExportAs
(calculateForJS, - (void)handleFactorialCalculateWithNumber:(NSNumber *)number);
//- (void)calculateForJS:(NSNumber *)number;
//js方法
- (void)pushViewController:(NSString *)view title:(NSString *)title;
- (void)callCamera;
@end
@interface OneViewController ()<UIWebViewDelegate, TestJSExport>
@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) JSContext *context;//给JavaScript提供运行的上下文环境
@property (nonatomic, strong) UIView *addView;
@end
@implementation OneViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.webView];
NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"test.html"];
NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[_webView loadHTMLString:htmlString baseURL:nil];
}
- (UIWebView *)webView {
if (_webView == nil) {
_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
_webView.delegate = self;
}
return _webView;
}
- (UIView *)addView {
if (_addView == nil) {
_addView =[[UIView alloc] initWithFrame:CGRectMake(10, 550, 200, 100)];
_addView.backgroundColor = [UIColor cyanColor];
}
return _addView;
}
#pragma mark UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
//将 html的title 设置为controller的title
self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
//获取当前页面的url
NSString *url = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
//这个好像是私有属性 审核时可能被苹果拒绝
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//打印异常,由于JS的异常信息是不会在OC中被直接打印的,所以我们在这里添加打印异常信息
self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"exceptionValue --- %@",exceptionValue);
};
//以 JSExport 协议关联 native方法
self.context[@"native"] = self;
//以 block 形式关联 JavaScript function
self.context[@"log"] = ^(NSString *str) {
NSLog(@"%@",str);
};
//以 block 形式关联 JavaScript function
self.context[@"alert"] = ^(NSString *str) {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"msg from js" message:str delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
[alter show];
});
};
//弱引用 避免循环引用
__block typeof(self) weakSelf = self;
self.context[@"addSubView"] = ^(NSString *viewName) {
[weakSelf.view addSubview:weakSelf.addView];
};
self.context[@"removeSubView"] = ^(NSString *viewName) {
[weakSelf.addView removeFromSuperview];
};
//多参数
self.context[@"mutiParams"] = ^(NSString *a, NSString *b, NSString *c) {
NSLog(@"%@ %@ %@",a,b,c);
};
}
#pragma mark - JSExport Methods
- (void)handleFactorialCalculateWithNumber:(NSNumber *)number{
NSLog(@"%@", number);
NSNumber *result = [self calculateFactorialOfNumber:number];
NSLog(@"%@", result);
[self.context[@"showResult"] callWithArguments:@[result]];
}
- (void)pushViewController:(NSString *)view title:(NSString *)title{
Class second = NSClassFromString(view);
id secondVC = [[second alloc]init];
((UIViewController*)secondVC).title = title;
[self.navigationController pushViewController:secondVC animated:YES];
}
// 假设此方法是在子线程中执行的，线程名sub-thread
- (void)callCamera {
// 这句假设要在主线程中执行，线程名main-thread
NSLog(@"callCamera");
// 下面这两句代码最好还是要在子线程sub-thread中执行啊
JSValue *picCallback = self.context[@"picCallBack"];
[picCallback callWithArguments:@[@"photos"]];
}
- (void)calculateForJS:(NSNumber *)number {
NSLog(@"点击了计算阶乘");
JSValue *showResult = self.context[@"showResult"];
[showResult callWithArguments:@[@"计算阶乘"]];
}
#pragma mark - Factorial Method
- (NSNumber *)calculateFactorialOfNumber:(NSNumber *)number{
NSInteger i = [number integerValue];
if (i < 0){
return [NSNumber numberWithInteger:0];
}
if (i == 0){
return [NSNumber numberWithInteger:1];
}
NSInteger r = (i * [(NSNumber *)[self calculateFactorialOfNumber:[NSNumber numberWithInteger:(i - 1)]] integerValue]);
return [NSNumber numberWithInteger:r];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
self.context[@"native"] = nil;
}
@end
获取HTML中的点击事件
在HTML中，为一个元素添加点击事件的两种方法
第一种
<input type="button" value="计算阶乘" onclick="native.calculateForJS(input.value);" />
在JS交互中，很多事情都是在webView的delegate方法中完成的，通过JSContent创建一个使用JS的环境，所以这里，我们先将self.content在这里面初始化;
#pragma mark UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
//这个好像是私有属性 审核时可能被苹果拒绝
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//打印异常,由于JS的异常信息是不会在OC中被直接打印的,所以我们在这里添加打印异常信息
self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"exceptionValue --- %@",exceptionValue);
};
//以JSExport 协议关联 native 的方法
self.context[@"native"] = self;
}
我们需要声明一个集成JSExport协议，协议中声明JS使用的OC方法
@protocol TestJSExport <JSExport>
/*
OC的函数命名和JS函数命名规则不同 我们可以通过JSExportAs这个宏优化JS中调用的名称
这个宏只对有参数的selector起作用
handleFactorialCalculateWithNumber:(NSNumber *)number作为 js方法:calculateForJS的别名*/
JSExportAs
(calculateForJS, - (void)handleFactorialCalculateWithNumber:(NSNumber *)number);
@end
当然你也可以按下面的写法
@protocol TestJSExport <JSExport>
- (void)calculateForJS:(NSNumber *)number;
@end
第二种
<input type="button" value="oc原生Alert" onclick="alert('alert');" />
这种我们需要使用block的形式关联JavaScript function
self.context[@"alert"] = ^(NSString *str) {
};
对HTML中的事件进行处理
第一种 协议形式
我们协议中制定的方法名一定要和HTML中的方法名相同。
当我们协议需要使用JS中的方法时，用下面的代码进行调用：
HTML中的方法
function showResult(resultNumber)
{
document.getElementById("result").innerText = resultNumber;
}
OC调用
JSValue *showResult = self.context[@"showResult"];
[showResult callWithArguments:@[@"计算阶乘"]];
第二种 Block形式
注意避免循环引用，同时刷新UI的工作应该放到主线程
self.context[@"alert"] = ^(NSString *str) {
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"msg from js" message:str delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
[alter show];
});
};
使用注意
OC调用JavaScript是同步，JavaScript调用OC是异步。
JavaScript调用本地方法是在子线程中执行的，这里要根据实际情况考虑线程之间的切换，而在回调JavaScript方法的时候最好是在刚开始调用此方法的线程中去执行那段JavaScript方法的代码，看下面的代码解释：
// 假设此方法是在子线程中执行的，线程名sub-thread
- (void)callCamera {
// 这句假设要在主线程中执行，线程名main-thread
NSLog(@"callCamera");
// 下面这两句代码最好还是要在子线程sub-thread中执行啊
JSValue *picCallback = self.context[@"picCallBack"];
[picCallback callWithArguments:@[@"photos"]];
}
本文demo: 点我下载
内存管理陷阱
Objective-C的内存管理机制是引用计数，JavaScript的内存管理机制是垃圾回收。在大部分情况下，JavaScriptCore能做到在这两种内存管理机制之间无缝无错转换，但也有少数情况需要特别注意。
在block内捕获JSContext
Block会为默认为所有被它捕获的对象创建一个强引用。JSContext为它管理的所有JSValue也都拥有一个强引用。并且，JSValue会为它保存的值和它所在的Context都维持一个强引用。这样JSContext和JSValue看上去是循环引用的，然而并不会，垃圾回收机制会打破这个循环引用。
看下面的例子：
self.context[@"getVersion"] = ^{
NSString *versionString = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];
versionString = [@"version " stringByAppendingString:versionString];
JSContext *context = [JSContext currentContext]; // 这里不要用self.context
JSValue *version = [JSValue valueWithObject:versionString inContext:context];
return version;
};
使用[JSContext currentContext]而不是self.context来在block中使用JSContext，来防止循环引用。
JSManagedValue
当把一个JavaScript值保存到一个本地实例变量上时，需要尤其注意内存管理陷阱。 用实例变量保存一个JSValue非常容易引起循环引用。
看以下下例子，自定义一个UIAlertView，当点击按钮时调用一个JavaScript函数：
#import <UIKit/UIKit.h>
#import <JavaScriptCore/JavaScriptCore.h>
@interface MyAlertView : UIAlertView
- (id)initWithTitle:(NSString *)title
message:(NSString *)message
success:(JSValue *)successHandler
failure:(JSValue *)failureHandler
context:(JSContext *)context;
@end
按照一般自定义AlertView的实现方法，MyAlertView需要持有successHandler，failureHandler这两个JSValue对象
向JavaScript环境注入一个function
self.context[@"presentNativeAlert"] = ^(NSString *title,
NSString *message,
JSValue *success,
JSValue *failure) {
JSContext *context = [JSContext currentContext];
MyAlertView *alertView = [[MyAlertView alloc] initWithTitle:title
message:message
success:success
failure:failure
context:context];
[alertView show];
};
因为JavaScript环境中都是“强引用”（相对Objective-C的概念来说）的，这时JSContext强引用了一个presentNativeAlert函数，这个函数中又强引用了MyAlertView 等于说JSContext强引用了MyAlertView，而MyAlertView为了持有两个回调强引用了successHandler和failureHandler这两个JSValue，这样MyAlertView和JavaScript环境互相引用了。
所以苹果提供了一个JSMagagedValue类来解决这个问题。
看MyAlertView.m的正确实现：
#import "MyAlertView.h"
@interface XorkAlertView() <UIAlertViewDelegate>
@property (strong, nonatomic) JSContext *ctxt;
@property (strong, nonatomic) JSMagagedValue *successHandler;
@property (strong, nonatomic) JSMagagedValue *failureHandler;
@end
@implementation MyAlertView
- (id)initWithTitle:(NSString *)title
message:(NSString *)message
success:(JSValue *)successHandler
failure:(JSValue *)failureHandler
context:(JSContext *)context {
self = [super initWithTitle:title
message:message
delegate:self
cancelButtonTitle:@"No"
otherButtonTitles:@"Yes", nil];
if (self) {
_ctxt = context;
_successHandler = [JSManagedValue managedValueWithValue:successHandler];
// A JSManagedValue by itself is a weak reference. You convert it into a conditionally retained
// reference, by inserting it to the JSVirtualMachine using addManagedReference:withOwner:
[context.virtualMachine addManagedReference:_successHandler withOwner:self];
_failureHandler = [JSManagedValue managedValueWithValue:failureHandler];
[context.virtualMachine addManagedReference:_failureHandler withOwner:self];
}
return self;
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
if (buttonIndex == self.cancelButtonIndex) {
JSValue *function = [self.failureHandler value];
[function callWithArguments:@[]];
} else {
JSValue *function = [self.successHandler value];
[function callWithArguments:@[]];
}
[self.ctxt.virtualMachine removeManagedReference:_failureHandler withOwner:self];
[self.ctxt.virtualMachine removeManagedReference:_successHandler withOwner:self];
}
@end
分析上面例子，从外部传入的JSValue对象在类内部使用JSManagedValue来保存。
JSManagedValue本身是一个弱引用对象，需要调用JSVirtualMachine的addManagedReference:withOwner:把它添加到JSVirtualMachine对象中，确保使用过程中JSValue不会被释放
当用户点击AlertView上的按钮时，根据用户点击哪一个按钮，来执行对应的处理函数，这时AlertView也随即被销毁。 这时需要手动调用removeManagedReference:withOwner:来移除JSManagedValue。
参考文章
http://www.jianshu.com/p/cdaf9bc3d65d
https://hjgitbook.gitbooks.io/ios/content/04-technical-research/04-javascriptcore-note.html
http://my.oschina.net/whforever/blog/669813
http://www.jianshu.com/p/f896d73c670a
