如果項(xiàng)目中設(shè)計(jì)Html頁(yè)面的乡翅,都少不了Objective-C與JavaScript的交互珠插,如果你的項(xiàng)目比較新奴迅,那應(yīng)該是Swift與JavaScript交互,差別不大.交互有兩個(gè)形式均抽,一種是Html頁(yè)面JavaScript對(duì)方或方法調(diào)用Objective-C代碼嫁赏,另外一種是Objective-C調(diào)用JavaScript代碼.
JavaScript 調(diào)用 Objective-C
JavaScript對(duì)方或方法調(diào)用Objective-C代碼有三種方式:
1.URL攔截,通過自定義的scheme實(shí)現(xiàn).
2.JavaScriptCore新增或替換JavaScript方法.
3.通過實(shí)現(xiàn)JSExport協(xié)議生成對(duì)象油挥,實(shí)現(xiàn)JavaScript對(duì)象調(diào)用OC對(duì)象方法.
第一種方式比較常見潦蝇,實(shí)現(xiàn)UIWebViewDelegate的可選方法:
__TVOS_PROHIBITED @protocol UIWebViewDelegate <NSObject>
@optional
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView *)webView;
- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;
@end
以訪問百度網(wǎng)頁(yè)為例:
#pragma mark - UIWebviewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *requestStr = [request.URL absoluteString];
NSLog(@"網(wǎng)絡(luò)請(qǐng)求地址:%@",requestStr);
if ( [[requestStr lowercaseString] containsString:@"news"]) {
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"FlyElephant---新聞" message:@"" preferredStyle:(UIAlertControllerStyleAlert)];
UIAlertAction *sureAlertAction = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {
}];
[alert addAction:sureAlertAction];
[self presentViewController:alert animated:YES completion:^{
}];
return NO;
}
return YES;
}
- (void)webViewDidStartLoad:(UIWebView *)webView {
NSLog(@"開始---webViewDidStartLoad");
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"加載結(jié)束---webViewDidFinishLoad");
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
NSLog(@"加載出錯(cuò)---didFailLoadWithError");
}
- (void)setUp {
UIWebView *webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
webView.delegate = self;
NSURL *url = [NSURL URLWithString:@"https://www.baidu.com/"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
[self.view addSubview:webView];
}
2.第二種方式需要一個(gè)簡(jiǎn)單的Html頁(yè)面配合款熬,代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript頁(yè)面</title>
<script type="text/javascript">
function jsClick2() {
alert('FlyElephant---本地的實(shí)現(xiàn)');
}
</script>
</head>
<body>
<p>測(cè)試</p>
<button onclick="jsClick()">測(cè)試按鈕</button>
<button onclick="jsClick2()">測(cè)試按鈕2</button>
</body>
</html>
導(dǎo)入JavaScriptCore頭文件之后,在代理中設(shè)置JSContext.
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"加載結(jié)束---webViewDidFinishLoad");
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[self setUpJavaScriptCallBack];
}
第一個(gè)按鈕點(diǎn)擊時(shí)候JavaScript沒有對(duì)應(yīng)的方法實(shí)現(xiàn)攘乒,第二個(gè)Objective-C對(duì)響應(yīng)方法進(jìn)行了重寫:
__weak typeof(self) weakSelf = self;
self.jsContext[@"jsClick"] = ^ {
NSArray *args = [JSContext currentArguments];
NSMutableArray *messages = [NSMutableArray array];
for (JSValue *obj in args) {
[messages addObject:[obj toObject]];
}
[weakSelf.jsContext evaluateScript:@"alert('FlyElephant---本地的實(shí)現(xiàn)')"];
};
self.jsContext[@"jsClick2"] = ^ {
[weakSelf.jsContext evaluateScript:@"alert('替換原有jsClick2方法')"];
};
3.JSContext并不能實(shí)現(xiàn)OC對(duì)象和JS對(duì)象之間的直接轉(zhuǎn)換贤牛,兩者面向?qū)ο蟮脑O(shè)計(jì)方式是不一樣的,OC是基于類繼承的则酝,JS是基于原型的殉簸,但是所有的對(duì)象都可以視為鍵值對(duì)集合.
JavaScript可以脫離原型直接用JSON表示對(duì)象,但是OC不能脫離繼承來(lái)表示對(duì)象沽讹,JavaScriptCore提供了JSExport作為兩種語(yǔ)言的互通協(xié)議.
JSExport沒有定義任何可選方法般卑,需要首先定義一個(gè)實(shí)現(xiàn)JSExport的協(xié)議,然后在自定義協(xié)議中定義JavaScript調(diào)用方法爽雄,有點(diǎn)繞椭微,看代碼吧.
@protocol UserExportProtocol <JSExport>
- (void)buy:(NSString *)name;
@end
@interface User : NSObject<UserExportProtocol>
@end
@implementation User
- (void)buy:(NSString *)name {
NSLog(@"FlyElephant買了---%@",name);
}
@end
OC端調(diào)用:
self.jsContext[@"user"] = tempUser;
NSString *buyStr = @"user.buy('書籍')";
[self.jsContext evaluateScript:buyStr];
打印的Log信息如下:
FlyElephant買了---書籍
可以通過對(duì)已有的類添加JSExport協(xié)議,定義一個(gè)UIButton的擴(kuò)展協(xié)議.
@protocol UIButtonExportProtocol <JSExport>
- (void)setTitle:(NSString *)title forState:(UIControlState)state;
@end
self.jsContext[@"button"] = self.testButton;
[self.jsContext evaluateScript:@"button.setTitleForState('FlyElephant 改變', 0)"];
Objective-C 調(diào)用 JavaScript
Objective-C調(diào)用JavaScript的方式有兩種:
1.stringByEvaluatingJavaScriptFromString
2.evaluateScript
第一種方式是webView中的方法不能確定調(diào)用之后是否出錯(cuò)盲链,調(diào)用的結(jié)果都是以字符串的形式方式,比較局限.
self.navigationItem.title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
第二種方式比較簡(jiǎn)單迟杂,需要先獲取JSContext:
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
JSValue *value = [self.jsContext evaluateScript:@"document.title"];
self.navigationItem.title = value.toString;
[self.jsContext setExceptionHandler:^(JSContext *context, JSValue *exception){
NSLog(@"%@", exception);
}];
如果你覺得以上方式比較復(fù)雜刽沾,那么請(qǐng)選用WebViewJavascriptBridge吧,接下來(lái)會(huì)對(duì)WebViewJavascriptBridge進(jìn)行源碼分析排拷,歡迎關(guān)注.
參考資料:
iOS7新JavaScriptCore框架入門介紹
JavaScriptCore框架在iOS7中的對(duì)象交互和管理