iOS下JS与OC的相互调用
2017-05-22 本文已影响82人
George2016
使用UIWebView，多少免不了要涉及一些JS与原生OC交互，今天就来总结一下两种交互方式吧。
在讲述之前，先写好了一个html的文件，并放入项目中：
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function secondClick() {
share('分享的标题','分享的内容','图片地址');
}
//刚方法会卡死界面
function showAlert(message){
alert(message);
}
//不会卡死界面
function asyncAlert(content) {
setTimeout(function() {
alert(content);
}, 1);
}
</script>
</header>
<body>
<h2> 这里是第二种方式 </h2>
<br/>
<br/>
<button type="button" onclick="secondClick()">Click Me!</button>
</body>
</html>
在上面的代码片段中，可以看到js中有两个方法，一个是secondClick，一个是showAlert;
可以看出secondClick方法** 又 **调用了原生OC的方法；
一、JS调用原生OC篇
既然是JS调用原生的OC方法，那OC方法肯定没有在JS文件中实现，我们需要先实现原生方法。
- 引入
#import <JavaScriptCore/JavaScriptCore.h>的头文件。 - 在webViewDidFinishLoad方法中添加如下代码（必须是在这个方法里面添加）：
-(void)webViewDidFinishLoad:(UIWebView *)webView {
//调用JS中已经写好的方法
dispatch_async(dispatch_get_main_queue(), ^{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"showAlert('恭喜发财')";
[context evaluateScript:textJS];
});
//实现JS中声明的方法
dispatch_async(dispatch_get_main_queue(), ^{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"share"] = ^() {
NSLog(@"================Begin==============");
NSArray *args = [JSContext currentArguments];
NSLog(@"参数为:%@", args);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"标题啦" message:@"消息啦" preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"好的啊" style:UIAlertActionStyleDefault handler:nil];
[alert addAction:action];
[self presentViewController:alert animated:YES completion:nil];
for (JSValue *jsVal in args) {
NSLog(@"&&&:%@", jsVal.toString);
}
NSLog(@"-------------End--------------");
};
});
}
二、OC调用原生JS篇
方式一
NSString *jsStr = [NSString stringWithFormat:@"showAlert('%@')",@"这里是JS中alert弹出的message"];
[_webView stringByEvaluatingJavaScriptFromString:jsStr];
注意：该方法会同步返回一个字符串，因此是一个同步方法，可能会阻塞UI。
方式二
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"showAlert('这里是JS中alert弹出的message')";
[context evaluateScript:textJS];
重点：
stringByEvaluatingJavaScriptFromString是一个同步的方法，使用它执行JS方法时，如果JS 方法比较耗的时候，会造成界面卡顿。尤其是js 弹出alert 的时候。
alert 也会阻塞界面，等待用户响应，而stringByEvaluatingJavaScriptFromString又会等待js执行完毕返回。这就造成了死锁。
官方推荐使用WKWebView的evaluateJavaScript:completionHandler:代替这个方法。
其实我们也有另外一种方式，自定义一个延迟执行alert 的方法来防止阻塞，然后我们调用自定义的alert 方法。同理，耗时较长的js 方法也可以放到setTimeout 中。
function asyncAlert(content) {
setTimeout(function() {
alert(content);
}, 1);
}
参考文章：JS_OC
