iOS下JS与原生OC互相调用(精品)

iOS开发免不了要与UIWebView打交道&＃xff0c;然后就要涉及到JS与原生OC交互&＃xff0c;今天总结一下JS与原生OC交互的两种方式。

JS调用原生OC篇

方式一

第一种方式是用JS发起一个假的URL请求&＃xff0c;然后利用UIWebView的代理方法拦截这次请求&＃xff0c;然后再做相应的处理。
我写了一个简单的HTML网页和一个btn点击事件用来与原生OC交互&＃xff0c;HTML代码如下&＃xff1a;

这里是第一种方式

然后在项目的控制器中实现UIWebView的代理方法&＃xff1a;

#pragma mark - UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{NSURL * url &＃61; [request URL];if ([[url scheme] isEqualToString:&＃64;"firstclick"]) {NSArray *params &＃61;[url.query componentsSeparatedByString:&＃64;"&"];NSMutableDictionary *tempDic &＃61; [NSMutableDictionary dictionary];for (NSString *paramStr in params) {NSArray *dicArray &＃61; [paramStr componentsSeparatedByString:&＃64;"&＃61;"];if (dicArray.count > 1) {NSString *decodeValue &＃61; [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];[tempDic setObject:decodeValue forKey:dicArray[0]];}}UIAlertView *alertView &＃61; [[UIAlertView alloc] initWithTitle:&＃64;"方式一" message:&＃64;"这是OC原生的弹出窗" delegate:self cancelButtonTitle:&＃64;"收到" otherButtonTitles:nil];[alertView show];NSLog(&＃64;"tempDic:%&＃64;",tempDic);return NO;}return YES;
}

注意&＃xff1a;1. JS中的firstClick,在拦截到的url scheme全都被转化为小写。
2.html中需要设置编码&＃xff0c;否则中文参数可能会出现编码问题。
3.JS用打开一个iFrame的方式替代直接用document.location的方式&＃xff0c;以避免多次请求&＃xff0c;被替换覆盖的问题。

早期的JS与原生交互的开源库很多都是用得这种方式来实现的&＃xff0c;例如&＃xff1a;PhoneGap、WebViewJavascriptBridge。关于这种方式调用OC方法&＃xff0c;唐巧早期有篇文章有过介绍&＃xff1a;
关于UIWebView和PhoneGap的总结

方式二

在iOS 7之后&＃xff0c;apple添加了一个新的库JavascriptCore&＃xff0c;用来做JS交互&＃xff0c;因此JS与原生OC交互也变得简单了许多。
首先导入JavascriptCore库, 然后在OC中获取JS的上下文

JSContext *context &＃61; [self.webView valueForKeyPath:&＃64;"documentView.webView.mainFrame.JavascriptContext"];

再然后定义好JS需要调用的方法&＃xff0c;例如JS要调用share方法&＃xff1a;
则可以在UIWebView加载url完成后&＃xff0c;在其代理方法中添加要调用的share方法&＃xff1a;

- (void)webViewDidFinishLoad:(UIWebView *)webView
{JSContext *context &＃61; [self.webView valueForKeyPath:&＃64;"documentView.webView.mainFrame.JavascriptContext"];//定义好JS要调用的方法, share就是调用的share方法名context[&＃64;"share"] &＃61; ^() {NSLog(&＃64;"&＃43;&＃43;&＃43;&＃43;&＃43;&＃43;&＃43;Begin Log&＃43;&＃43;&＃43;&＃43;&＃43;&＃43;&＃43;");NSArray *args &＃61; [JSContext currentArguments];dispatch_async(dispatch_get_main_queue(), ^{UIAlertView *alertView &＃61; [[UIAlertView alloc] initWithTitle:&＃64;"方式二" message:&＃64;"这是OC原生的弹出窗" delegate:self cancelButtonTitle:&＃64;"收到" otherButtonTitles:nil];[alertView show];});for (JSValue *jsVal in args) {NSLog(&＃64;"%&＃64;", jsVal.toString);}NSLog(&＃64;"-------End Log-------");};
}

注意&＃xff1a;
可能最新版本的iOS系统做了改动&＃xff0c;现在&＃xff08;iOS9&＃xff0c;Xcode 7.3&＃xff0c;去年使用Xcode 6 和iOS 8没有线程问题&＃xff09;中测试,block中是在子线程&＃xff0c;因此执行UI操作&＃xff0c;控制台有警告&＃xff0c;需要回到主线程再操作UI。

其中相对应的html部分如下&＃xff1a;

这里是第二种方式

JS部分确实要简单的多了。

OC调用JS篇

方式一

NSString *jsStr &＃61; [NSString stringWithFormat:&＃64;"showAlert(&＃39;%&＃64;&＃39;)",&＃64;"这里是JS中alert弹出的message"];
[_webView stringByEvaluatingJavascriptFromString:jsStr];

注意&＃xff1a;该方法会同步返回一个字符串&＃xff0c;因此是一个同步方法&＃xff0c;可能会阻塞UI。

方式二

继续使用JavascriptCore库来做JS交互。

JSContext *context &＃61; [self.webView valueForKeyPath:&＃64;"documentView.webView.mainFrame.JavascriptContext"];
NSString *textJS &＃61; &＃64;"showAlert(&＃39;这里是JS中alert弹出的message&＃39;)";
[context evaluateScript:textJS];

重点&＃xff1a;
stringByEvaluatingJavascriptFromString是一个同步的方法&＃xff0c;使用它执行JS方法时&＃xff0c;如果JS 方法比较耗的时候&＃xff0c;会造成界面卡顿。尤其是js 弹出alert 的时候。
alert 也会阻塞界面&＃xff0c;等待用户响应&＃xff0c;而stringByEvaluatingJavascriptFromString又会等待js执行完毕返回。这就造成了死锁。
官方推荐使用WKWebView的evaluateJavascript:completionHandler:代替这个方法。
其实我们也有另外一种方式&＃xff0c;自定义一个延迟执行alert 的方法来防止阻塞&＃xff0c;然后我们调用自定义的alert 方法。同理&＃xff0c;耗时较长的js 方法也可以放到setTimeout 中。

function asyncAlert(content) {     setTimeout(function(){          alert(content);          },1); }