iOS＋JavaScriptCore.framework的基本使用(二)

实际使用

继续上篇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];
}

iOS＋JavaScriptCore.framework的基本使用(二)

实际使用

推荐阅读更多精彩内容