实际使用
继续上篇iOS＋JavaScriptCore.framework的基本使用(一)
示例代码：(YYJavaScriopCoreDemo)
.
使用场景：加载一个web网页JSCallOC.html，点击网页上的选择图片按钮，选择图片, 根据选择的状态更新相关提示。
JSCallOC.gif
思路：
1. 加载完网页时，获取javascript的运行环境 self.jsContext,并进行相关设置
2. JS调用OC方法takePicture： 点击网页的“Select Picture”按钮时，调用 JSOCViewController 的方法 -(void)takePicture;
3. OC调用JS方法showResult： 选择完图片后，OC调用JS的修改红色文字的方法-
代码实现
-
网页处理
<!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为一个oc对象，takePicture是一个遵守了JSExport协议的对象方法，因为只有遵守JSExport协议的OC方法才能被js调用--> <input id="tpBtn" type="button" value="Select Picture" onclick="ocObject.takePicture();" /> <br/> <br/> </center> </div> </body> </html> -
oc 处理
-
加载网页
- (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]; } -
网页加载完后进行相关处理
- (void)webViewDidFinishLoad:(UIWebView *)webView{// 获取网页标题 self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"]; // 2.1. 获取js执行环境 self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; // 2.1 传递js所需要的对象 self.jsContext[@"ocObject"] = self; self.jsContext.exceptionHandler = ^(JSContext *con, JSValue *exception) { con.exception = exception; NSLog(@"%@", exception); }; } -
自定义JSExport子协议JSOCViewControllerExport，控制器JSOCViewController遵守并实现协议，以供网页调用，查看上面的网页标签 <input id="tpBtn" type="button" value="Select Picture" onclick="ocObject.takePicture();" />
//3.1.自定义协议
@protocol JSOCViewControllerExport <JSExport>
- (void)takePicture;
@end//3.2.遵守协议 @interface JSOCViewController : UIViewController<JSOCViewControllerExport> @end @implementation JSOCViewController //3.3.实现协议 - (void)takePicture{ // 运行时发现一个问题：会报一下问题：This application is modifying the autolayout engine from a background thread // 然后，发现不在主线程，但UI修改需在主线程运行，所以有了下面的GCD NSLog(@"%@",[NSThread currentThread]); __weak typeof (self) weakSelf = self; dispatch_async(dispatch_get_main_queue(), ^{ // 对话框提示 UIAlertController *actionSheet = [[UIAlertController alloc]init]; UIAlertAction *act0 = [UIAlertAction actionWithTitle:@"OC拍照" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) { if (![UIImagePickerController availableMediaTypesForSourceType:UIImagePickerControllerSourceTypeCamera]) { // OC 调用 JS 方法 JSValue *updateFunc = self.jsContext[@"showResult"]; [updateFunc callWithArguments:@[@"相机不支持"]]; return ; } //资源类型为照相机 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相册" 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 -
调用js方法修改相关文字提示
-(void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { // 4.1. OC 调用 JS 方法 JSValue *updateFunc = self.jsContext[@"showResult"]; [updateFunc callWithArguments:@[@"已选择"]]; //关闭相册界面 [picker dismissViewControllerAnimated:YES completion:nil]; } - (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{ // 4.2. OC 调用 JS 方法 JSValue *updateFunc = self.jsContext[@"showResult"]; [updateFunc callWithArguments:@[@"取消选择"]]; //关闭相册界面 [picker dismissViewControllerAnimated:YES completion:nil]; }
-
-
