使用UIWebView,多少免不了要涉及一些JS與原生OC交互日矫,今天就來總結(jié)一下兩種交互方式吧茵汰。
在講述之前枢里,先寫好了一個html的文件,并放入項目中:
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function secondClick() {
share('分享的標題','分享的內(nèi)容','圖片地址');
}
//剛方法會卡死界面
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>
在上面的代碼片段中,可以看到j(luò)s中有兩個方法栏豺,一個是secondClick
彬碱,一個是showAlert
;
可以看出secondClick
方法** 又 **調(diào)用了原生OC的方法;
一奥洼、JS調(diào)用原生OC篇
既然是JS調(diào)用原生的OC方法巷疼,那OC方法肯定沒有在JS文件中實現(xiàn),我們需要先實現(xiàn)原生方法灵奖。
- 引入
#import <JavaScriptCore/JavaScriptCore.h>
的頭文件嚼沿。 - 在webViewDidFinishLoad方法中添加如下代碼(必須是在這個方法里面添加):
-(void)webViewDidFinishLoad:(UIWebView *)webView {
//調(diào)用JS中已經(jīng)寫好的方法
dispatch_async(dispatch_get_main_queue(), ^{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"showAlert('恭喜發(fā)財')";
[context evaluateScript:textJS];
});
//實現(xiàn)JS中聲明的方法
dispatch_async(dispatch_get_main_queue(), ^{
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"share"] = ^() {
NSLog(@"================Begin==============");
NSArray *args = [JSContext currentArguments];
NSLog(@"參數(shù)為:%@", 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調(diào)用原生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
是一個同步的方法擅编,使用它執(zhí)行JS方法時攀细,如果JS 方法比較耗的時候,會造成界面卡頓沙咏。尤其是js 彈出alert 的時候辨图。
alert 也會阻塞界面,等待用戶響應(yīng)肢藐,而stringByEvaluatingJavaScriptFromString
又會等待js執(zhí)行完畢返回。這就造成了死鎖吱韭。
官方推薦使用WKWebView
的evaluateJavaScript:completionHandler:
代替這個方法吆豹。
其實我們也有另外一種方式,自定義一個延遲執(zhí)行alert 的方法來防止阻塞理盆,然后我們調(diào)用自定義的alert 方法。同理,耗時較長的js 方法也可以放到setTimeout 中秃踩。
function asyncAlert(content) {
setTimeout(function() {
alert(content);
}, 1);
}
參考文章:JS_OC