實(shí)際使用
繼續(xù)上篇iOS＋JavaScriptCore.framework的基本使用(一)
示例代碼：(YYJavaScriopCoreDemo)
.
使用場(chǎng)景：加載一個(gè)web網(wǎng)頁JSCallOC.html，點(diǎn)擊網(wǎng)頁上的選擇圖片按鈕，選擇圖片, 根據(jù)選擇的狀態(tài)更新相關(guān)提示。
思路：
1. 加載完網(wǎng)頁時(shí)，獲取javascript的運(yùn)行環(huán)境 self.jsContext,并進(jìn)行相關(guān)設(shè)置
2. JS調(diào)用OC方法takePicture： 點(diǎn)擊網(wǎng)頁的“Select Picture”按鈕時(shí)，調(diào)用 JSOCViewController 的方法 -(void)takePicture;
3. OC調(diào)用JS方法showResult： 選擇完圖片后，OC調(diào)用JS的修改紅色文字的方法-
代碼實(shí)現(xiàn)
-
網(wǎng)頁處理
<!doctype html>
<html>
<head><title>JSCallOC</title> <script type="text/javascript"> <!--??????1.showResult為js中定義的方法--> function showResult(resultStr) { document.getElementById("result").innerText = resultStr; } </script> </head> <body > <div id="div-a"> <center> <div width="100" height="100" > <font size="5" color="red"> <b id="result"> select </b> </font> </div> <!--??????2.ocObject為一個(gè)oc對(duì)象，takePicture是一個(gè)遵守了JSExport協(xié)議的對(duì)象方法，因?yàn)橹挥凶袷豃SExport協(xié)議的OC方法才能被js調(diào)用--> <input id="tpBtn" type="button" value="Select Picture" onclick="ocObject.takePicture();" /> <br/> <br/> </center> </div> </body> </html> -
oc 處理
-
加載網(wǎng)頁
- (void)viewDidLoad {
[super viewDidLoad];NSURL *url = [[NSBundle mainBundle] URLForResource:@"JSOC.html" withExtension:nil]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; self.webview.delegate = self; [self.webview loadRequest:request]; } -
網(wǎng)頁加載完后進(jìn)行相關(guān)處理
- (void)webViewDidFinishLoad:(UIWebView *)webView{// 獲取網(wǎng)頁標(biāo)題 self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"]; // 2.1. 獲取js執(zhí)行環(huán)境 self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; // 2.1 傳遞js所需要的對(duì)象 self.jsContext[@"ocObject"] = self; self.jsContext.exceptionHandler = ^(JSContext *con, JSValue *exception) { con.exception = exception; NSLog(@"%@", exception); }; } -
自定義JSExport子協(xié)議JSOCViewControllerExport，控制器JSOCViewController遵守并實(shí)現(xiàn)協(xié)議，以供網(wǎng)頁調(diào)用，查看上面的網(wǎng)頁標(biāo)簽 <input id="tpBtn" type="button" value="Select Picture" onclick="ocObject.takePicture();" />
//3.1.自定義協(xié)議
@protocol JSOCViewControllerExport <JSExport>
- (void)takePicture;
@end//3.2.遵守協(xié)議 @interface JSOCViewController : UIViewController<JSOCViewControllerExport> @end @implementation JSOCViewController //3.3.實(shí)現(xiàn)協(xié)議 - (void)takePicture{ // 運(yùn)行時(shí)發(fā)現(xiàn)一個(gè)問題：會(huì)報(bào)一下問題：This application is modifying the autolayout engine from a background thread // 然后，發(fā)現(xiàn)不在主線程，但UI修改需在主線程運(yùn)行，所以有了下面的GCD NSLog(@"%@",[NSThread currentThread]); __weak typeof (self) weakSelf = self; dispatch_async(dispatch_get_main_queue(), ^{ // 對(duì)話框提示 UIAlertController *actionSheet = [[UIAlertController alloc]init]; UIAlertAction *act0 = [UIAlertAction actionWithTitle:@"OC拍照" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) { if (![UIImagePickerController availableMediaTypesForSourceType:UIImagePickerControllerSourceTypeCamera]) { // OC 調(diào)用 JS 方法 JSValue *updateFunc = self.jsContext[@"showResult"]; [updateFunc callWithArguments:@[@"相機(jī)不支持"]]; return ; } //資源類型為照相機(jī) UIImagePickerController *picker = [[UIImagePickerController alloc] init]; picker.delegate = weakSelf; picker.allowsEditing = YES; picker.sourceType = UIImagePickerControllerSourceTypeCamera; [weakSelf presentViewController:picker animated:YES completion:nil]; }]; UIAlertAction *act1 = [UIAlertAction actionWithTitle:@"OC相冊(cè)" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) { //資源類型為圖片庫 UIImagePickerController *picker = [[UIImagePickerController alloc] init]; picker.delegate = weakSelf; picker.allowsEditing = YES; picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary; [weakSelf presentViewController:picker animated:YES completion:nil]; }]; UIAlertAction *act2 = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil]; [actionSheet addAction:act0]; [actionSheet addAction:act1]; [actionSheet addAction:act2]; [weakSelf presentViewController:actionSheet animated:YES completion:nil]; }); } @end -
調(diào)用js方法修改相關(guān)文字提示
-(void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { // 4.1. OC 調(diào)用 JS 方法 JSValue *updateFunc = self.jsContext[@"showResult"]; [updateFunc callWithArguments:@[@"已選擇"]]; //關(guān)閉相冊(cè)界面 [picker dismissViewControllerAnimated:YES completion:nil]; } - (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{ // 4.2. OC 調(diào)用 JS 方法 JSValue *updateFunc = self.jsContext[@"showResult"]; [updateFunc callWithArguments:@[@"取消選擇"]]; //關(guān)閉相冊(cè)界面 [picker dismissViewControllerAnimated:YES completion:nil]; }
-
-
