使用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
