16/07/20
JS与OC的交互
iOS7之前
通过拦截URL的方式实现交互
在iOS7之前，实现js与oc的交互，方式为向UIWebView发送stringByEvaluatingJavaScriptFromString:消息来执行一段JavaScript的脚本。而且如果想用JavaScript来调用Objective-C的方法，必须打开一个自定义的URL（例如：Nanshanyi://），然后在UIWebView的delegate方法webView:shouldStartLoadWithRequest:navigationType中进行处理
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSURL *url = request.URL;
if ([url.scheme isEqualToString:@"nanshanyi"]) {
//在这里做JavaScript调用Objective-C的事。
//需要传的值放在url后面的参数里如：Nanshanyi://www.php8080.com?{"title":"标题","id":"123","des":"描述内容"}
NSString *dataJson = url.query;//拿到后面的json字符串
NSString *str = [dataJson stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
NSLog(@"%@",str);
//执行一段js代码，弹出提示框
[webView stringByEvaluatingJavaScriptFromString:@"alert('seccess')"];
return NO;
}
return YES;
}
iOS7之后
javascriptCore（苹果原生框架）
JavaScriptCore是封装了JavaScript和Objective-C桥接的Objective-C API，只需要较少的的代码，就可以实现JavaScript与Objective-C的相互调用
- JavaScriptCore中类及协议：
- JSContext：给JavaScript提供运行的上下文环境
- JSValue：JavaScript和Objective-C数据和方法的桥梁
- JSManagedValue：管理数据和方法的类
- JSVirtualMachine：处理线程相关，使用较少
- JSExport：这是一个协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议
OC调用JS
JS文件
//计算阶乘
var factorial = function(n) {
if (n < 0)
return;
if (n === 0)
return 1;
return n * factorial(n - 1)
};
OC文件调用
- (void) factorial
{
//加载本地的JS文件
NSString *path = [[NSBundlemainBundle]pathForResource:@"test"ofType:@"js"];
NSString *testScript = [NSStringstringWithContentsOfFile:pathencoding:NSUTF8StringEncodingerr
or:nil];
//一个 Context 就是一个 JavaScript 代码执行的环境，也叫作用域。
JSContext *context = [[JSContextalloc]init];
[context evaluateScript:testScript];
//JS是弱类型的，ObjectiveC是强类型的，JSValue被引入处理这种类型差异，在
Objective-C 对象和 JavaScript 对象之间起转换作用）
JSValue *function = context[@"factorial"];
JSValue *result = [function callWithArguments:@[@10]];
NSLog(@"factorial(10) = %d", [resulttoInt32]);
}
JS调用OC
1.通过delegate的方式调用
HTML文件
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<h1>OC和JS的交互代理方式</h1>
<div>
<!-- 生成一个 button 添加点击事件-->
<input type="button" value="JsToOcShare" onclick="callShare()">
</div>
<script>
function callShare() {
var shareContent = JSON.stringify({"title": "分享", "desc": "分 享内容", "shareUrl": "//www.greatytc.com/users/774b1d5616a7/latest_articles"});
Nanshanyi.share(shareContent);
}
<!-- OC调JS-->
function showAlert(message){
alert(message);
}
<!-- JS调OC成功后回调-->
var shareCallback = function(){
alert('success');
}
</script>
</body>
</html>
OC文件调用
.h文件
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSObjcDelegate <JSExport>
- (void)share:(NSString *)shareContent;
@end
@interface ViewController : UIViewController<JSObjcDelegate>
@end
.m文件
#import "ViewController.h"
@interface ViewController ()<UIWebViewDelegate>
@property (nonatomic,strong)UIWebView *webView;
@property (nonatomic,strong)JSContext *jsContext;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self CustomUI];
}
- (void)CustomUI{
self.webView = [[UIWebView alloc]initWithFrame:self.view.bounds];
self.webView.delegate = self;
[self.view addSubview:_webView];
NSURL *url = [[NSBundle mainBundle] URLForResource:@"untitled3" withExtension:@"html"];
[self.webView loadRequest:[NSURLRequest requestWithURL:url]];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
// 获取webview中的JScontext
_jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//代理方式JS调OC方法
//Nanshanyi 相当于桥接，通过它将 OC 与 JS 联系起来
_jsContext[@"Nanshanyi"] = self;
_jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
- (void)share:(NSString *)shareContent {
NSLog(@"share:%@", shareContent);
// 分享成功后,回调js的方法shareCallback
// 也即是 OC 调用 JS 方法,只调用方法，没有参数传递
JSValue *shareCallback = self.jsContext[@"shareCallback"];
[shareCallback callWithArguments:nil];
}
2.通过block方式进行调用
.m文件调用
- (void)showAlert{//直接调用该方法实现OC调用JS，并传参
NSString *jsStr = @"showAlert('ios js交互成功,我是网页 alert')";
[_jsContext evaluateScript:jsStr];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
_jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//block 方式 JS直接调用OC，并传参，简单明了
__weak typeof (self)weakSelf = self;
_jsContext[@"callShare"] =^(id obj){
weakSelf.lable.text = obj;
//把传过来的Json字符串，转为字典
NSData *data = [(NSString *)obj dataUsingEncoding:NSUTF8StringEncoding ];
NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
NSLog(@"%@",dict);
};
_jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
//比如把js中的方法名改掉，OC找不到相应方法，这里就会打印异常信息
NSLog(@"异常信息：%@", exceptionValue);
};
}
