JSContext
这个东西是干什么的？看看苹果官方给的解释：A JSContextobject represents a JavaScript execution environment. You create and use JavaScript contexts to evaluate JavaScript scripts from Objective-C or Swift code, to access values defined in or calculated in JavaScript, and to make native objects, methods, or functions accessible to JavaScript.翻译一下，大概意思就是：JSContext就是整个JavaScript的上下文，拥有这个上下文，就可以访问JavaScript中的对象或者方法，也可以使用本地的对象或者方法来供JavaScript调用。说白了，通过JSContext就可以实现交互。
获取JSContext
通常情况下可以在webView加载完以后获取:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}
获取到JSContext就可以和js交互了。
一：js调用原生方法
JSContext提供了两种方式，可以让js调用原生的方法，一种是block，一种是JSExport协议。
1、使用block交互
例如，有如下网页:
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<button type="button" onclick="playAudio()">播放音频</button>
</body>
</html>
点击webView中的播放按钮，然后调用原生的播放功能，我们这里定义播放按钮的方法为playAudio，所以在Objective-C这样调用：
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"playAudio"] = ^() {
NSLog(@"js调用本地开始播放");
};
}
点击播放按钮，控制台如下输出：
2017-04-14 17:42:42.692 JSCoreDemo[30994:1357505] js调用本地开始播放
这里需要注意的是js中的方法名和block中的字符串一定要一样。
这种情况下，是js调用原生是不传参数的，那传参又该如何呢？
例如，如下网页：
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function jsPlayAudio() {
nativePlayAudio("http://www.baidu.com");
}
</script>
</head>
<body>
<button type="button" onclick="jsPlayAudio()">给Native传参</button>
</body>
</html>
这里是显调用js的jsPlayAudio方法，然后调用原生的nativePlayAudio方法，并且传过去一个字符串。在Objective-C这样调用：
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"nativePlayAudio"] = ^() {
NSArray *args = [JSContext currentArguments];
for (JSValue obj in args) {
NSLog(@"js传过来的参数是：%@",obj);
}
};
}
运行结果如下：
2017-04-14 17:49:19.051 JSCoreDemo[31131:1367134] js传过来的参数是：http://www.baidu.com
通过[JSContext currentArguments]可以获取到所有的参数，因为参数有可能不是一个。所有的参数都会被包装成JSValue对象，查看JSValue可以看出，JSValue可以转换为：Object、Bool、Double、Int32、UInt32、Number、String、Date、Array、Dictionary等类型。并且JSValue还提供了一系列的判断是否是某一类型的方法。具体转换类型如下：
Objective-C type | JavaScript type
--------------------+---------------------
nil | undefined
NSNull | null
NSString | string
NSNumber | number, boolean
NSDictionary | Object object
NSArray | Array object
NSDate | Date object
NSBlock (1) | Function object (1)
id (2) | Wrapper object (2)
Class (3) | Constructor object (3)
2、使用JSExport交互
使用block交互有一个问题，加入我们在js中不是直接调用方法，而是调用某个对象的某个方法，这个时候再使用block就不行了，这就使用到了JSExport。
例如，如下网页：
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function jsPlayAudio() {
nativeObj.playAudio();
}
</script>
</head>
<body>
<button type="button" onclick="jsPlayAudio()">给Native传参</button>
</body>
</html>
nativeObj是在js中定义的对象，当然，js可能并没有创建这个对象。那该如何使用呢？
这里需要我们定义一个协议，并继承JSExport协议，在协议中添加方法，如下：
BridgeModel.h
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol BridgeProtocol <JSExport>
- (void)playAudio;
@end
@interface BridgeModel : NSObject<BridgeProtocol>
@end
BridgeModel.m
#import "BridgeModel.h"
@implementation BridgeModel
- (void)playAudio {
NSLog(@"js调用本地开始播放");
}
@end
需要如此使用：
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
BridgeModel *model = [[BridgeModel alloc] init];
context[@"nativeObj"] = model;
}
记住，js中的对象名和Objective-C中的对象名要一致。并且协议方法一定不能是@optional。
输出如下：
2017-04-14 18:12:41.545 JSCoreDemo[31708:1402262] js调用本地开始播放
我们再来看看传参该如何处理：
例如，如下网页：
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function jsPlayAudio() {
nativeObj.playAudioWithUrlAndType("http://www.baidu.com",666);
}
</script>
</head>
<body>
<button type="button" onclick="jsPlayAudio()">给Native传参</button>
</body>
</html>
这里传了两个参数。
来看Objective-C:
@protocol BridgeProtocol <JSExport>
- (void)playAudioWithUrl:(NSString *)url AndType:(NSInteger)type;
@end
- (void)playAudioWithUrl:(NSString *)url AndType:(NSInteger)type {
NSLog(@"js调用本地开始播放--%@--%ld",url,type);
}
协议中我们定义了一个方法，playAudioWithUrl和AndType拼起来正好是js中的方法，所以，只要原生的方法拼起来和js中的方法一致就可以调用。
输出如下：
2017-04-14 18:22:45.854 JSCoreDemo[31973:1416619] js调用本地开始播放--http://www.baidu.com--666
二：原生调用js
使用原生调用js方法就很简单了。
例如，如下网页：
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function endAudio(str) {
alert('停止'+str);
}
function endAudio(str) {
alert('停止');
}
</script>
</head>
<body>
<button type="button" onclick="jsPlayAudio()">给Native传参</button>
</body>
</html>
直接使用JSContext就可以调用：
- (void)webViewDidFinishLoad:(UIWebView *)webView {
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[context evaluateScript:@"endAudio()"];
[context evaluateScript:@"endAudio(abc)"];
}
当然，想调用某个js对象的方法，也可以直接调用：
[context evaluateScript:@"jsObj.endAudio(abc)"];
另外，你也可以传JSValue对象：
NSString *js = [NSString stringWithFormat:@"endAudio(%@)",[JSValue valueWithDouble:1.11 inContext:context]];
[context evaluateScript:js];
