iOS UIWebView中javascript与Objective-C交互、获取摄像头

  运行部分脚本时需要确定页面是否加载完成(DOMContentLoaded)。当然，stringByEvaluatingJavaScriptFromString只是Native向UIWebView中的网页单向的通信，UIWebView中的网页向Native通信则需要通过UIWebView的协webView:shouldStartLoadWithRequest:navigationType:。首先，创建一个文件命名为test.html，内容如下：

  1. <a href="js-call://test/lwme.cnblogs.com">测试</a>

  3. <a href="js-call://other/lwme.cnblogs.com">测试2</a>复制代码
复制代码


    然后，在Native实现如下代码： 

  1. @interface LwmeTestViewController ()<UIWebViewDelegate>

  3. @end



  7. @implementation LwmeTestViewController

  9. - (void)viewDidLoad

  11. {

  13.     [super viewDidLoad];

  15.     // 设置delegate并加载html

  17.     self.webView.delegate = self;

  19.     NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];

  21.     NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];

  23.     [self.webView loadHTMLString:fileContent baseURL:nil];

  25. }

  27. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

  29. {

  31.     NSString *requestString = [[request URL] absoluteString];

  33.     NSString *protocol = @"js-call://";

  35.     if ([requestString hasPrefix:protocol]) {

  37.         NSString *requestContent = [requestString substringFromIndex:[protocol length]];

  39.         NSArray *vals = [requestContent componentsSeparatedByString:@"/"];

  41.         if ([vals[0] isEqualToString:@"test"]) { //test方法

  43.             [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"alert('地址：%@');", vals[1]]];

  45.         }

  47.         else {

  49.             [webView stringByEvaluatingJavaScriptFromString:@"alert('未定义');"];

  51.         }

  53.         return NO; // 对于js-call://协议不执行跳转

  55.     }

  57.     return YES;

  59. }
复制代码


    这样就完成了简单的通信，UIWebView中的网页需要访问设备的功能都可以在webView:shouldStartLoadWithRequest:navigationType:编写相应的代码来实现。 在UIWebView中调用摄像头、相册、图库iOS 6以上版本的Mobile Safari支持在网页中调用摄像头，只需要放置以下代码：

  1. <input type="file" capture="camera" accept="image/*" id="cameraInput">
复制代码


    但是iOS 5的浏览器还不支持这个功能，如果需要调用摄像头，则依然需要通过Hybrid开发方式来实现。首先，创建一个文件命名为camera.html，定义三个按钮分别用于获取摄像头、图库、相册： 

  1. <script>

  3.     function cameraCallback(imageData) {

  5.         var img = createImageWithBase64(imageData);

  7.         document.getElementById("cameraWrapper").appendChild(img);

  9.     }

  11.     function photolibraryCallback(imageData) {

  13.         var img = createImageWithBase64(imageData);

  15.         document.getElementById("photolibraryWrapper").appendChild(img);

  17.     }

  19.     function albumCallback(imageData) {

  21.         var img = createImageWithBase64(imageData);

  23.         document.getElementById("albumWrapper").appendChild(img);

  25.     }

  27.     function createImageWithBase64(imageData) {

  29.         var img = new Image();

  31.         img.src = "data:image/jpeg;base64," + imageData;

  33.         img.style.width = "50px";

  35.         img.style.height = "50px";

  37.         return img;

  39.     }

  41. </script>

  43. <p style="text-align:center;padding:20px;">

  45.     <a href="js-call://camera/cameraCallback">拍照</a>  

  47.     <a href="js-call://photolibrary/photolibraryCallback">图库</a>  

  49.     <a href="js-call://album/albumCallback">相册</a>

  51. </p>



  55. <fieldset>

  57.     <legend>拍照</legend>

  59.     <div id="cameraWrapper">

  61.     </div>

  63. </fieldset>



  67. <fieldset>

  69.     <legend>图库</legend>

  71.     <div id="photolibraryWrapper">

  73.     </div>

  75. </fieldset>



  79. <fieldset>

  81.     <legend>相册</legend>

  83.     <div id="albumWrapper">

  85.     </div>

  87. </fieldset>
复制代码


    Native实现代码如下：

  1. #import "LwmeViewController.h"

  3. #import "NSData+Base64.h"

  5. // Base64代码从 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.h 和 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.m 获取



  9. @interface LwmeViewController ()<UIWebViewDelegate, UINavigationControllerDelegate, UIImagePickerControllerDelegate>

  11. {

  13.     NSString *callback; // 定义变量用于保存返回函数

  15. }

  17. @end



  21. @implementation LwmeViewController

  23. - (void)viewDidLoad

  25. {

  27.     [super viewDidLoad];

  29.     // 设置delegate并载入html文件

  31.     self.webView.delegate = self;

  33.     NSString *filePath = [[NSBundle mainBundle] pathForResource:@"camera" ofType:@"html"];

  35.     NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];

  37.     [self.webView loadHTMLString:fileContent baseURL:nil];

  39. }



  43. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

  45. {

  47.     NSString *requestString = [[request URL] absoluteString];

  49.     NSString *protocol = @"js-call://"; //协议名称

  51.     if ([requestString hasPrefix:protocol]) {

  53.         NSString *requestContent = [requestString substringFromIndex:[protocol length]];

  55.         NSArray *vals = [requestContent componentsSeparatedByString:@"/"];

  57.         if ([[vals objectAtIndex:0] isEqualToString:@"camera"]) { // 摄像头

  59.             callback = [vals objectAtIndex:1];

  61.             [self doAction:UIImagePickerControllerSourceTypeCamera];

  63.         } else if([[vals objectAtIndex:0] isEqualToString:@"photolibrary"]) { // 图库

  65.             callback = [vals objectAtIndex:1];

  67.             [self doAction:UIImagePickerControllerSourceTypePhotoLibrary];

  69.         } else if([[vals objectAtIndex:0] isEqualToString:@"album"]) { // 相册

  71.             callback = [vals objectAtIndex:1];

  73.             [self doAction:UIImagePickerControllerSourceTypeSavedPhotosAlbum];

  75.         }

  77.         else {

  79.             [webView stringByEvaluatingJavaScriptFromString:@"alert('未定义/lwme.cnblogs.com');"];

  81.         }

  83.         return NO;

  85.     }

  87.     return YES;

  89. }



  93. - (void)doAction:(UIImagePickerControllerSourceType)sourceType

  95. {

  97.     UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];

  99.     imagePicker.delegate = self;

  101.     if ([UIImagePickerController isSourceTypeAvailable:sourceType]) {

  103.         imagePicker.sourceType = sourceType;

  105.     } else {

  107.         UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"照片获取失败" message:@"没有可用的照片来源" delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];

  109.         [av show];

  111.         return;

  113.     }

  115.     // iPad设备做额外处理

  117.     if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {

  119.         UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:imagePicker];

  121.         [popover presentPopoverFromRect:CGRectMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 3, 10, 10) inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];

  123.     } else {

  125.         [self presentModalViewController:imagePicker animated:YES];

  127.     }

  129. }



  133. - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info

  135. {

  137.     if ([[info objectForKey:UIImagePickerControllerMediaType] isEqualToString:@"public.image"]) {

  139.         // 返回图片

  141.         UIImage *originalImage = [info objectForKey:UIImagePickerControllerOriginalImage];

  143.         // 设置并显示加载动画

  145.         UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"正在处理图片..." message:@" "

  147.                                                 delegate:self

  149.                                        cancelButtonTitle:nil

  151.                                        otherButtonTitles:nil, nil];

  153.          

  155.         UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc]

  157.                                             initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

  159.         loading.center = CGPointMake(139.5, 75.5);

  161.         [av addSubview:loading];

  163.         [loading startAnimating];

  165.         [av show];

  167.         // 在后台线程处理图片

  169.         dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{

  171.             // 这里可以对图片做一些处理，如调整大小等，否则图片过大显示在网页上时会造成内存警告

  173.             NSString *base64 = [UIImagePNGRepresentation(originalImage, 0.3) base64Encoding]; // 图片转换成base64字符串

  175.             [self performSelectorOnMainThread:@selector(doCallback:) withObject:base64 waitUntilDone:YES]; // 把结果显示在网页上

  177.             [av dismissWithClickedButtonIndex:0 animated:YES]; // 关闭动画

  179.         });

  181.     }

  183.      

  185.     [picker dismissModalViewControllerAnimated:YES];

  187. }



  191. - (void)doCallback:(NSString *)data

  193. {

  195.     [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@('%@');", callback, data]];

  197. }

  199. @end
复制代码

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hzcya1995/p/13318037.html