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

复制代码

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

1. @interface LwmeTestViewController ()<UIWebViewDelegate>
   
2. 
   
3. @end
   
4. 
   
5. 
   
6. 
   
7. @implementation LwmeTestViewController
   
8. 
   
9. - (void)viewDidLoad
   
10. 
    
11. {
    
12. 
    
13.     [super viewDidLoad];
    
14. 
    
15.     // 设置delegate并加载html
    
16. 
    
17.     self.webView.delegate = self;
    
18. 
    
19.     NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
    
20. 
    
21.     NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    
22. 
    
23.     [self.webView loadHTMLString:fileContent baseURL:nil];
    
24. 
    
25. }
    
26. 
    
27. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
    
28. 
    
29. {
    
30. 
    
31.     NSString *requestString = [[request URL] absoluteString];
    
32. 
    
33.     NSString *protocol = @"js-call://";
    
34. 
    
35.     if ([requestString hasPrefix:protocol]) {
    
36. 
    
37.         NSString *requestContent = [requestString substringFromIndex:[protocol length]];
    
38. 
    
39.         NSArray *vals = [requestContent componentsSeparatedByString:@"/"];
    
40. 
    
41.         if ([vals[0] isEqualToString:@"test"]) { //test方法
    
42. 
    
43.             [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"alert('地址：%@');", vals[1]]];
    
44. 
    
45.         }
    
46. 
    
47.         else {
    
48. 
    
49.             [webView stringByEvaluatingJavaScriptFromString:@"alert('未定义');"];
    
50. 
    
51.         }
    
52. 
    
53.         return NO; // 对于js-call://协议不执行跳转
    
54. 
    
55.     }
    
56. 
    
57.     return YES;
    
58. 
    
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>
   
2. 
   
3.     function cameraCallback(imageData) {
   
4. 
   
5.         var img = createImageWithBase64(imageData);
   
6. 
   
7.         document.getElementById("cameraWrapper").appendChild(img);
   
8. 
   
9.     }
   
10. 
    
11.     function photolibraryCallback(imageData) {
    
12. 
    
13.         var img = createImageWithBase64(imageData);
    
14. 
    
15.         document.getElementById("photolibraryWrapper").appendChild(img);
    
16. 
    
17.     }
    
18. 
    
19.     function albumCallback(imageData) {
    
20. 
    
21.         var img = createImageWithBase64(imageData);
    
22. 
    
23.         document.getElementById("albumWrapper").appendChild(img);
    
24. 
    
25.     }
    
26. 
    
27.     function createImageWithBase64(imageData) {
    
28. 
    
29.         var img = new Image();
    
30. 
    
31.         img.src = "data:image/jpeg;base64," + imageData;
    
32. 
    
33.         img.style.width = "50px";
    
34. 
    
35.         img.style.height = "50px";
    
36. 
    
37.         return img;
    
38. 
    
39.     }
    
40. 
    
41. </script>
    
42. 
    
43. <p style="text-align:center;padding:20px;">
    
44. 
    
45.     <a href="js-call://camera/cameraCallback">拍照</a>  
    
46. 
    
47.     <a href="js-call://photolibrary/photolibraryCallback">图库</a>  
    
48. 
    
49.     <a href="js-call://album/albumCallback">相册</a>
    
50. 
    
51. </p>
    
52. 
    
53. 
    
54. 
    
55. <fieldset>
    
56. 
    
57.     <legend>拍照</legend>
    
58. 
    
59.     <div id="cameraWrapper">
    
60. 
    
61.     </div>
    
62. 
    
63. </fieldset>
    
64. 
    
65. 
    
66. 
    
67. <fieldset>
    
68. 
    
69.     <legend>图库</legend>
    
70. 
    
71.     <div id="photolibraryWrapper">
    
72. 
    
73.     </div>
    
74. 
    
75. </fieldset>
    
76. 
    
77. 
    
78. 
    
79. <fieldset>
    
80. 
    
81.     <legend>相册</legend>
    
82. 
    
83.     <div id="albumWrapper">
    
84. 
    
85.     </div>
    
86. 
    
87. </fieldset>

复制代码

    Native实现代码如下：

1. #import "LwmeViewController.h"
   
2. 
   
3. #import "NSData+Base64.h"
   
4. 
   
5. // Base64代码从 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.h 和 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.m 获取
   
6. 
   
7. 
   
8. 
   
9. @interface LwmeViewController ()<UIWebViewDelegate, UINavigationControllerDelegate, UIImagePickerControllerDelegate>
   
10. 
    
11. {
    
12. 
    
13.     NSString *callback; // 定义变量用于保存返回函数
    
14. 
    
15. }
    
16. 
    
17. @end
    
18. 
    
19. 
    
20. 
    
21. @implementation LwmeViewController
    
22. 
    
23. - (void)viewDidLoad
    
24. 
    
25. {
    
26. 
    
27.     [super viewDidLoad];
    
28. 
    
29.     // 设置delegate并载入html文件
    
30. 
    
31.     self.webView.delegate = self;
    
32. 
    
33.     NSString *filePath = [[NSBundle mainBundle] pathForResource:@"camera" ofType:@"html"];
    
34. 
    
35.     NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    
36. 
    
37.     [self.webView loadHTMLString:fileContent baseURL:nil];
    
38. 
    
39. }
    
40. 
    
41. 
    
42. 
    
43. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
    
44. 
    
45. {
    
46. 
    
47.     NSString *requestString = [[request URL] absoluteString];
    
48. 
    
49.     NSString *protocol = @"js-call://"; //协议名称
    
50. 
    
51.     if ([requestString hasPrefix:protocol]) {
    
52. 
    
53.         NSString *requestContent = [requestString substringFromIndex:[protocol length]];
    
54. 
    
55.         NSArray *vals = [requestContent componentsSeparatedByString:@"/"];
    
56. 
    
57.         if ([[vals objectAtIndex:0] isEqualToString:@"camera"]) { // 摄像头
    
58. 
    
59.             callback = [vals objectAtIndex:1];
    
60. 
    
61.             [self doAction:UIImagePickerControllerSourceTypeCamera];
    
62. 
    
63.         } else if([[vals objectAtIndex:0] isEqualToString:@"photolibrary"]) { // 图库
    
64. 
    
65.             callback = [vals objectAtIndex:1];
    
66. 
    
67.             [self doAction:UIImagePickerControllerSourceTypePhotoLibrary];
    
68. 
    
69.         } else if([[vals objectAtIndex:0] isEqualToString:@"album"]) { // 相册
    
70. 
    
71.             callback = [vals objectAtIndex:1];
    
72. 
    
73.             [self doAction:UIImagePickerControllerSourceTypeSavedPhotosAlbum];
    
74. 
    
75.         }
    
76. 
    
77.         else {
    
78. 
    
79.             [webView stringByEvaluatingJavaScriptFromString:@"alert('未定义/lwme.cnblogs.com');"];
    
80. 
    
81.         }
    
82. 
    
83.         return NO;
    
84. 
    
85.     }
    
86. 
    
87.     return YES;
    
88. 
    
89. }
    
90. 
    
91. 
    
92. 
    
93. - (void)doAction:(UIImagePickerControllerSourceType)sourceType
    
94. 
    
95. {
    
96. 
    
97.     UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
    
98. 
    
99.     imagePicker.delegate = self;
    
100. 
     
101.     if ([UIImagePickerController isSourceTypeAvailable:sourceType]) {
     
102. 
     
103.         imagePicker.sourceType = sourceType;
     
104. 
     
105.     } else {
     
106. 
     
107.         UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"照片获取失败" message:@"没有可用的照片来源" delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
     
108. 
     
109.         [av show];
     
110. 
     
111.         return;
     
112. 
     
113.     }
     
114. 
     
115.     // iPad设备做额外处理
     
116. 
     
117.     if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
     
118. 
     
119.         UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:imagePicker];
     
120. 
     
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];
     
122. 
     
123.     } else {
     
124. 
     
125.         [self presentModalViewController:imagePicker animated:YES];
     
126. 
     
127.     }
     
128. 
     
129. }
     
130. 
     
131. 
     
132. 
     
133. - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
     
134. 
     
135. {
     
136. 
     
137.     if ([[info objectForKey:UIImagePickerControllerMediaType] isEqualToString:@"public.image"]) {
     
138. 
     
139.         // 返回图片
     
140. 
     
141.         UIImage *originalImage = [info objectForKey:UIImagePickerControllerOriginalImage];
     
142. 
     
143.         // 设置并显示加载动画
     
144. 
     
145.         UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"正在处理图片..." message:@" "
     
146. 
     
147.                                                 delegate:self
     
148. 
     
149.                                        cancelButtonTitle:nil
     
150. 
     
151.                                        otherButtonTitles:nil, nil];
     
152. 
     
153.          
     
154. 
     
155.         UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc]
     
156. 
     
157.                                             initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
     
158. 
     
159.         loading.center = CGPointMake(139.5, 75.5);
     
160. 
     
161.         [av addSubview:loading];
     
162. 
     
163.         [loading startAnimating];
     
164. 
     
165.         [av show];
     
166. 
     
167.         // 在后台线程处理图片
     
168. 
     
169.         dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
     
170. 
     
171.             // 这里可以对图片做一些处理，如调整大小等，否则图片过大显示在网页上时会造成内存警告
     
172. 
     
173.             NSString *base64 = [UIImagePNGRepresentation(originalImage, 0.3) base64Encoding]; // 图片转换成base64字符串
     
174. 
     
175.             [self performSelectorOnMainThread:@selector(doCallback:) withObject:base64 waitUntilDone:YES]; // 把结果显示在网页上
     
176. 
     
177.             [av dismissWithClickedButtonIndex:0 animated:YES]; // 关闭动画
     
178. 
     
179.         });
     
180. 
     
181.     }
     
182. 
     
183.      
     
184. 
     
185.     [picker dismissModalViewControllerAnimated:YES];
     
186. 
     
187. }
     
188. 
     
189. 
     
190. 
     
191. - (void)doCallback:(NSString *)data
     
192. 
     
193. {
     
194. 
     
195.     [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@('%@');", callback, data]];
     
196. 
     
197. }
     
198. 
     
199. @end

复制代码