简介
iOS 7.0
开始,iOS加入了JavaScriptCore
框架。用Objective-C
把WebKit
的JavaScript
引擎封装了一下,提供了简单快捷的方式与JavaScript
交互。
JavaScriptCore使用
NSHipster中文版的JavaScriptCore
iOS7 新JavaScriptCore框架入门介绍
简要介绍JavaScriptCore
#ifndef JavaScriptCore_h
#define JavaScriptCore_h
#include <JavaScriptCore/JavaScript.h>
#include <JavaScriptCore/JSStringRefCF.h>
#if defined(__OBJC__) && JSC_OBJC_API_ENABLED
#import "JSContext.h"
#import "JSValue.h"
#import "JSManagedValue.h"
#import "JSVirtualMachine.h"
#import "JSExport.h"
#endif
#endif /* JavaScriptCore_h */
在JavaScriptCore.h
中可以看到,该框架主要的类就只有五个:
JSVirtualMachine
看名字直译是JS
虚拟机,也就是说JavaScript
是在一个虚拟的环境中执行,而JSVirtualMachine
为其执行提供底层资源。
/*!
@interface
@discussion An instance of JSVirtualMachine represents a single JavaScript "object space"
or set of execution resources. Thread safety is supported by locking the
virtual machine, with concurrent JavaScript execution supported by allocating
separate instances of JSVirtualMachine.
*/
NS_CLASS_AVAILABLE(10_9, 7_0)
@interface JSVirtualMachine : NSObject
翻译这段描述:
一个JSVirtualMachine
实例,代表一个独立的JavaScript
对象空间,并为其执行提供资源。它通过加锁虚拟机,保证JSVirtualMachine
是线程安全的,如果要并发执行JavaScript
,那我们必须创建多个独立的JSVirtualMachine
实例,在不同的实例中执行JavaScript
。
但是我们一般不用新建JSVirtualMachine
对象,因为创建JSContext
时,如果我们不提供一个特性的JSVirtualMachine
,内部会自动创建一个JSVirtualMachine
对象。
JSContext
JSContext
是为JavaScript的
执行提供运行环境,所有的JavaScript
的执行都必须在JSContext
环境中。JSContext
也管理JSVirtualMachine
中对象的生命周期。每一个JSValue
对象都要强引用关联一个JSContext
。当与某JSContext
对象关联的所有JSValue
释放后,JSContext
也会被释放。
// 1.这种方式需要传入一个JSVirtualMachine对象,如果传nil,会导致应用崩溃的。
JSVirtualMachine *JSVM = [[JSVirtualMachine alloc] init];
JSContext *JSCtx = [[JSContext alloc] initWithVirtualMachine:JSVM];
// 2.这种方式,内部会自动创建一个JSVirtualMachine对象,可以通过JSCtx.virtualMachine
// 看其是否创建了一个JSVirtualMachine对象。
JSContext *JSCtx = [[JSContext alloc] init];
// 3. 通过webView的获取JSContext。
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
上面推荐的两篇文章以及网上介绍JavaScriptCore
的文章多是通过1和2这两种方式创建JSContext
,然后执行JavaScript
,演示JavaScriptCore
。我一直有疑问,如果不是HTML
结合UIWebView
,才会使用到JavaScript
,那在一个虚拟的环境里运行JS
有什么意义。所以,后面我是用方式3来创建JSContext
。
JSValue
JSValue
都是通过JSContext
返回或者创建的,并没有构造方法。JSValue
包含了每一个JavaScript
类型的值,通过JSValue
可以将Objective-C
中的类型转换为JavaScript
中的类型,也可以将JavaScript
中的类型转换为Objective-C
中的类型。
JSManagedValue
JSManagedValue
主要用途是解决JSValue
对象在Objective-C
堆上的安全引用问题。把JSValue
保存进Objective-C
堆对象中是不正确的,这很容易引发循环引用,而导致JSContext
不能释放。
JSExport
JSExport
是一个协议类,但是该协议并没有任何属性和方法。我们可以自定义一个协议类,继承自JSExport
。无论我们在JSExport
里声明的属性,实例方法还是类方法,继承的协议都会自动的提供给任何JavaScript
代码。我们只需要在自定义的协议类中,添加上属性和方法就可以了。
使用
本地HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了,所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
function asyncAlert(content) {
setTimeout(function(){
alert(content);
},1);
}
function showAlertClick() {
showAlert();
}
function alertWithString(content) {
asyncAlert(content);
document.getElementById("returnValue").value = content;
}
function callMethodClick() {
setColor();
}
function callMethodWithObjectClick() {
bridge.setColorWithRGB(20, 180, 250, 0.5);
}
</script>
</head>
<body>
<input type="button" value="OC调用JS" onclick="showAlertClick()">
<input type="button" value="JS直接调用OC" onclick="callMethodClick()">
<input type="button" value="JS通过对象调用OC" onclick="callMethodWithObjectClick()">
</body>
</html>
加载WebView
- (void)loadWebView {
self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
self.webView.delegate = self;
NSURL *indexURL = [[NSBundle mainBundle] URLForResource:@"index1" withExtension:@"html"];
NSURLRequest *request = [NSURLRequest requestWithURL:indexURL];
[self.webView loadRequest:request];
[self.view addSubview:self.webView];
}
获取JSContext
实现UIWebViewDelegate
协议方法- (void)webViewDidFinishLoad:(UIWebView *)webView
。
#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[self showAlertWithContext:context];
[self setColorWithContext:context];
[self setColorByInterfaceWithContext:context];
}
OC调用JS
- UIWebView调用JS方法
[context evaluateScript:@"alertWithString('OC调用JS方法')"];
- JSContext调用JS方法
- (void)showAlertWithContext:(JSContext *)context {
context[@"showAlert"] = ^(){
dispatch_async(dispatch_get_main_queue(), ^{
NSString *jsStr = [NSString stringWithFormat:@"alertWithMessage('%@')", @"OC调用JS方法"];
[self.webView stringByEvaluatingJavaScriptFromString:jsStr];
});
};
}
JS调用OC
- JS直接调用方法
这种方式是通过block
的方式。
- (void)setColorWithContext:(JSContext *)context {
context[@"setColor"] = ^() {
dispatch_async(dispatch_get_main_queue(), ^{
UIColor *color = [UIColor colorWithRed:arc4random()%256/255.0f green:arc4random()%256/255.0f blue:arc4random()%256/255.0f alpha:0.5];
self.navigationController.navigationBar.backgroundColor = color;
});
};
}
- JS通过对象调用方法
先声明一个继承自JSExport
的协议,声明方法。
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSBridge <JSExport>
// - (void)goURL:(NSString *)URL; 一个参数
// 当方法有两个或两个以上参数时,OC方法与JS方法保持一致
JSExportAs(setColorWithRGB, - (void)setColorWithRGB:(int)red green:(int)green blue:(int)blue alpha:(double)alpha);
@end
Controller
遵守协议实现方法。
- (void)setColorWithRGB:(int)red green:(int)green blue:(int)blue alpha:(double)alpha {
dispatch_async(dispatch_get_main_queue(), ^{
UIColor *color = [UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:alpha];
self.navigationController.navigationBar.backgroundColor = color;
});
}
用JSContext
注册对象:
- (void)setColorByInterfaceWithContext:(JSContext *)context {
// 当前JSContext注册对象
context[@"bridge"] = self;
}
效果
WKWebView与JavaScriptCore
由于WKWebView
不支持通过如下的KVC
的方式创建JSContext
,所以WKWebView
中如何实现OC
与JS
交互可以看前面这篇文章iOS与JavaScript交互三: MessageHandler
网友评论