在开发中APP端嵌入了越来越多的html网页，html页面已经不仅仅满足展示功能，还需要能与原生语言进行交互、相互传值。今天就写个简单的Demo 记录下JS和OC之间的互相调用， 运行成功后的界面如下：
交互界面.png
需要达到：
- 点击HTML页面上的按钮，能调用OC方法；
- 点击VC上的按钮，能调用JS方法。
实现代码
- 首先导入事先写好的HTML文件, 内容大致如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<h2>JS与OC交互</h2>
<input type="button" value="JS调用OC-1" onclick="call()">
</div>
<script>
var call = function()
{
var callInfo = JSON.stringify('JS调用OC');
callBackToOC(callInfo);
}
var ocClick = function (str)
{
alert(str);
}
</script>
</body>
</html>
- 在我们的VC中引用#import <JavaScriptCore/JavaScriptCore.h>， 并使用UIWebView去加载上面的html文件, 写好JS和OC交互的界面。
- (void)viewDidLoad
{
[super viewDidLoad];
self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 100)];
self.webView.delegate = self;
[self.view addSubview:self.webView];
UIButton *ocBut = [UIButton buttonWithType:UIButtonTypeCustom];
ocBut.backgroundColor = [UIColor greenColor];
ocBut.frame = CGRectMake(10, [UIScreen mainScreen].bounds.size.height - 80, [UIScreen mainScreen].bounds.size.width - 20, 30);
[ocBut setTitle:@"OC调用JS方法" forState:UIControlStateNormal];
[ocBut setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[ocBut addTarget:self action:@selector(butClick:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:ocBut];
NSString* path = [[NSBundle mainBundle] pathForResource:@"Demo" ofType:@"html"];
NSURL* url = [NSURL fileURLWithPath:path];
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
[self.webView loadRequest:request];
}
- 实现WebView加载完毕的代理
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
// 监听JS按钮事件的回调
self.jsContext[@"callBackToOC"] =^{
NSArray *arg = [JSContext currentArguments];
for (id obj in arg)
{
NSLog(@"%@",obj);
}
};
}
加载完毕html页面后，通过监听JS点击事件后callBackToOC方法的回调拿到JS传过来的值，达到JS调用OC的目的。点击html页面上的按钮就能看到JS传过来的消息：
2017-11-08 15:52:41.544201+0800 JavaScript[39008:2528651] "JS调用OC"
- 实现VC上面按钮的点击事件
- (void)butClick:(UIButton *)sender
{
[self.jsContext evaluateScript:@"ocClick('OC调用JS')"];
}
点击vc上面的按钮，就能看到OC调用JS的弹出框。
OC调用JS.png
代码上传GitHub
网友评论