UIWebView中javascript与Objective-C交互、获取摄像头
UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容。
支持的文档格式
除了HTML以外,UIWebView还支持iWork, Office等文档格式:
- Excel (.xls)
- Keynote (.key.zip)
- Numbers (.numbers.zip)
- Pages (.pages.zip)
- PDF (.pdf)
- Powerpoint (.ppt)
- Word (.doc)
- Rich Text Format (.rtf)
- Rich Text Format Directory(.rtfd.zip)
- Keynote ‘09 (.key)
- Numbers ‘09 (.numbers)
- Pages ‘09 (.pages)
载入这些文档的方法也和html一样:
1
2
3
4
|
NSString *path = [[NSBundle mainBundle] pathForResource: "test.doc" ofType:nil]; NSURL *url = [NSURL fileURLWithPath:path]; NSURLRequest *request = [NSURLRequest requestWithURL:url]; [webView loadRequest:request]; |
HTML5技术及框架
移动设备浏览器的功能越来越强大,包括对HTML5、CSS3的支持,提供丰富的JavaScript API用于调用设备各种功能,使得开发出来的Web App非常接近原生App。
HTML5技术有如下优点:
- 跨平台兼容性:不受移动平台及设备的限制,不需要单独针对iOS或Android平台、不同尺寸的设备编写特定的代码
- 快速的开发效率、快速更新及发布效率
- 低技术门槛及维护成本:只需要掌握HTML5/CSS/JavaScript
当然,HTML5也有它的缺点:
- 访问设备特定功能的API非常有限:局限于浏览器运行环境,可用的API远远少于原生应用
- 性能低于原生应用导致用户体验较差:特别是某一些绚丽的效果,或者是互动性很强的功能
随着HTML5的流行,出现了许多优秀的HTML5框架,它们可以使开发变得更加简单,进一步提高开发效率:
- jQuery Mobile:http://jquerymobile.com/
- jQTouch:http://jqtjs.com/
- Sencha Touch:http://www.sencha.com/products/touch
- NimbleKit:http://www.nimblekit.com/
- The-M-Project:http://www.the-m-project.net/
- Jo:http://joapp.com/
- DHTMLX Touch:http://dhtmlx.com/touch/
Hybrid开发方式
Native App需要较高的技术水平,虽然性能优越用户体验较好,但跨平台兼容性差,而且开发、维护成本太高,难以适应快速更新的需求变化;而Web App技术门槛低,良好的跨平台兼容性,开发、维护成本低,但是性能低导致用户体验较差。
Native App开发方法适合于游戏等需要良好用户体验的应用,而Web App开发方法适合没有太多交互的应用。这两种方法就像两个极端,而一般性应用并不是特别需要其中一种方法带来的好处,于是就产生了结合这两种开发方法的折中方案:Hybrid开发方法。
针对一般性应用,使用Hybrid开发方法,开发者就能使用跨平台的HTML5技术开发大部分的应用程序代码,又能在需要的时候使用一些设备的功能,充分结合了Native App开发方法和Web App开发方法的长处,在提供良好用户体验的同时,大大降低开发和维护的成本以及提高效率。
Hybrid开发方式也有一些框架/工具:
- Xamarin:http://xamarin.com/ 含iOS平台的MonoTouch, Android平台的MonoDroid,甚至还有mac桌面app
- PhoneGap:http://phonegap.com/ 它的核心Cordova已贡献给Apache
- Sencha Architect:http://www.sencha.com/products/architect
- Titanium (js –> native):http://www.appcelerator.com/platform/titanium-platform/
- AppMobi XDK:http://www.appmobi.com/
- AppCan:http://appcan.cn/
其中,Xamarin可以采用纯C#代码开发iOS/Android应用。而PhoneGap则是针对不同平台的WebView进行封装和扩展,使开发人员可以通过Javascript访问设备的一些功能。
当然,使用这些框架/工具需要一定的学习成本,如果对Objective-C和HTML5相关技术比较熟悉,也可以完全不用依赖于这些框架进行开发。
UIWebView与Javascript交互
UIWebView提供了stringByEvaluatingJavaScriptFromString方法,它将Javascript代码嵌入到页面中运行,并将运行结果返回。
1
2
3
4
|
NSString *result1 = [webView stringByEvaluatingJavaScriptFromString:@ "alert('lwme.cnblogs.com');" ]; // 弹出提示,无返回值 NSString *result2 = [webView stringByEvaluatingJavaScriptFromString:@ "location.href;" ]; // 返回页面地址 NSString *result3 = [webView stringByEvaluatingJavaScriptFromString:@ "document.getElementById('lwme').innerHTML;" ]; // 返回页面某个标记内容 NSString *result4 = [webView stringByEvaluatingJavaScriptFromString:@ "document.getElementById('lwme').innerHTML = 'lwme.cnblogs.com';" ]; // 设置页面某个标记内容 |
需要注意的是:
- js的执行时间不能超过10秒,否则UIWebView将停止执行脚本。
- js分配的内存限制为10M,如果超过此限制,UIWebView将引发异常。
另外需要注意,运行部分脚本时需要确定页面是否加载完成(DOMContentLoaded)。
当然,stringByEvaluatingJavaScriptFromString只是Native向UIWebView中的网页单向的通信,UIWebView中的网页向Native通信则需要通过UIWebView的协议webView:shouldStartLoadWithRequest:navigationType:
。
首先,创建一个文件命名为test.html,内容如下:
<a href="js-call://test/lwme.cnblogs.com">测试</a>
<a href="js-call://other/lwme.cnblogs.com">测试2</a>
然后,在Native实现如下代码:
@interface LwmeTestViewController ()<UIWebViewDelegate>
@end @implementation LwmeTestViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 设置delegate并加载html
self.webView.delegate = self;
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:fileContent baseURL:nil];
}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *requestString = [[request URL] absoluteString];
NSString *protocol = @"js-call://";
if ([requestString hasPrefix:protocol]) {
NSString *requestContent = [requestString substringFromIndex:[protocol length]];
NSArray *vals = [requestContent componentsSeparatedByString:@"/"];
if ([vals[0] isEqualToString:@"test"]) { //test方法
[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"alert('地址:%@');", vals[1]]];
}
else {
[webView stringByEvaluatingJavaScriptFromString:@"alert('未定义');"];
}
return NO; // 对于js-call://协议不执行跳转
}
return YES;
}
这样就完成了简单的通信,UIWebView中的网页需要访问设备的功能都可以在webView:shouldStartLoadWithRequest:navigationType:
编写相应的代码来实现。
在UIWebView中调用摄像头、相册、图库
iOS 6以上版本的Mobile Safari支持在网页中调用摄像头,只需要放置以下代码:
<input type="file" capture="camera" accept="image/*" id="cameraInput">
但是iOS 5的浏览器还不支持这个功能,如果需要调用摄像头,则依然需要通过Hybrid开发方式来实现。
首先,创建一个文件命名为camera.html,定义三个按钮分别用于获取摄像头、图库、相册:
<script>
function cameraCallback(imageData) {
var img = createImageWithBase64(imageData);
document.getElementById("cameraWrapper").appendChild(img);
}
function photolibraryCallback(imageData) {
var img = createImageWithBase64(imageData);
document.getElementById("photolibraryWrapper").appendChild(img);
}
function albumCallback(imageData) {
var img = createImageWithBase64(imageData);
document.getElementById("albumWrapper").appendChild(img);
}
function createImageWithBase64(imageData) {
var img = new Image();
img.src = "data:image/jpeg;base64," + imageData;
img.style.width = "50px";
img.style.height = "50px";
return img;
}
</script>
<p style="text-align:center;padding:20px;">
<a href="js-call://camera/cameraCallback">拍照</a>
<a href="js-call://photolibrary/photolibraryCallback">图库</a>
<a href="js-call://album/albumCallback">相册</a>
</p> <fieldset>
<legend>拍照</legend>
<div id="cameraWrapper">
</div>
</fieldset> <fieldset>
<legend>图库</legend>
<div id="photolibraryWrapper">
</div>
</fieldset> <fieldset>
<legend>相册</legend>
<div id="albumWrapper">
</div>
</fieldset>
Native实现代码如下:
#import "LwmeViewController.h"
#import "NSData+Base64.h"
// Base64代码从 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.h 和 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.m 获取 @interface LwmeViewController ()<UIWebViewDelegate, UINavigationControllerDelegate, UIImagePickerControllerDelegate>
{
NSString *callback; // 定义变量用于保存返回函数
}
@end @implementation LwmeViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// 设置delegate并载入html文件
self.webView.delegate = self;
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"camera" ofType:@"html"];
NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:fileContent baseURL:nil];
} - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *requestString = [[request URL] absoluteString];
NSString *protocol = @"js-call://"; //协议名称
if ([requestString hasPrefix:protocol]) {
NSString *requestContent = [requestString substringFromIndex:[protocol length]];
NSArray *vals = [requestContent componentsSeparatedByString:@"/"];
if ([[vals objectAtIndex:0] isEqualToString:@"camera"]) { // 摄像头
callback = [vals objectAtIndex:1];
[self doAction:UIImagePickerControllerSourceTypeCamera];
} else if([[vals objectAtIndex:0] isEqualToString:@"photolibrary"]) { // 图库
callback = [vals objectAtIndex:1];
[self doAction:UIImagePickerControllerSourceTypePhotoLibrary];
} else if([[vals objectAtIndex:0] isEqualToString:@"album"]) { // 相册
callback = [vals objectAtIndex:1];
[self doAction:UIImagePickerControllerSourceTypeSavedPhotosAlbum];
}
else {
[webView stringByEvaluatingJavaScriptFromString:@"alert('未定义/lwme.cnblogs.com');"];
}
return NO;
}
return YES;
} - (void)doAction:(UIImagePickerControllerSourceType)sourceType
{
UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
imagePicker.delegate = self;
if ([UIImagePickerController isSourceTypeAvailable:sourceType]) {
imagePicker.sourceType = sourceType;
} else {
UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"照片获取失败" message:@"没有可用的照片来源" delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
[av show];
return;
}
// iPad设备做额外处理
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:imagePicker];
[popover presentPopoverFromRect:CGRectMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 3, 10, 10) inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
} else {
[self presentModalViewController:imagePicker animated:YES];
}
} - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
if ([[info objectForKey:UIImagePickerControllerMediaType] isEqualToString:@"public.image"]) {
// 返回图片
UIImage *originalImage = [info objectForKey:UIImagePickerControllerOriginalImage];
// 设置并显示加载动画
UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"正在处理图片..." message:@"\n\n"
delegate:self
cancelButtonTitle:nil
otherButtonTitles:nil, nil]; UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc]
initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
loading.center = CGPointMake(139.5, 75.5);
[av addSubview:loading];
[loading startAnimating];
[av show];
// 在后台线程处理图片
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{
// 这里可以对图片做一些处理,如调整大小等,否则图片过大显示在网页上时会造成内存警告
NSString *base64 = [UIImagePNGRepresentation(originalImage, 0.3) base64Encoding]; // 图片转换成base64字符串
[self performSelectorOnMainThread:@selector(doCallback:) withObject:base64 waitUntilDone:YES]; // 把结果显示在网页上
[av dismissWithClickedButtonIndex:0 animated:YES]; // 关闭动画
});
} [picker dismissModalViewControllerAnimated:YES];
} - (void)doCallback:(NSString *)data
{
[self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@('%@');", callback, data]];
}
@end
以上简单的代码虽然比较粗糙,但也基本实现了功能,如果有更多的需求,可以在这个基础上进行一些封装、扩展。
源代码提供在GitHub:https://github.com/corminlu/UIWebViewCallCamera
当然,这方面也有一些封装的比较好的类库:
- WebViewJavascriptBridge:https://github.com/marcuswestin/WebViewJavascriptBridge
- GAJavaScript:https://github.com/newyankeecodeshop/GAJavaScript
- NativeBridge:https://github.com/ochameau/NativeBridge (他的文章有更详细的说明)
UIWebView中javascript与Objective-C交互、获取摄像头的更多相关文章
- asp.net中javascript与后台c#交互
asp.net中javascript与后台c#交互 作者:熊猫大叔 字体:[增加 减小] 类型:转载 时间:2015-10-23我要评论,出处:http://www.jb51.net/article/ ...
- iOS UIWebView中javascript与Objective-C交互、获取摄像头
UIWebView是iOS开发中常用的一个视图控件,多数情况下,它被用来显示HTML格式的内容. 支持的文档格式 除了HTML以外,UIWebView还支持iWork, Office等文档格式: Ex ...
- iOS UIWebView 中 js调用OC 打开相册 获取图片, OC调用js 将图片加载到html上
线上html <!DOCTYPE html> <html> <head> <title>HTML中用JS调用OC方法</title> < ...
- iOS UIWebView与JavaScript的交互 相关资料
UIWebView自适应宽度 iOS UIWebView中javascript与Objective-C交互.获取摄像头 iOS中JavaScript和OC交互 iOS与js交互,获取webview完整 ...
- 【iOS开发】UIWebView与JavaScript(JS) 回调交互
------------------------------------------------- 很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一 ...
- UIWebView与JavaScript(JS) 回调交互 -备
很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一样, 参考:http://blog.sina.com.cn/s/blog_693de6100102v ...
- UIWebView与JavaScript的交互
UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...
- Xcode6 UIWebView与JavaScript交互(issue fix)
这篇文章中,有介绍UIWebView与JavaScript交互,在UIWebView截获JavaScript请求处理.从app的角度,这是JavaScript的Hook请求. 在Xcode6之前的Ap ...
- UIWebView中JS与OC交互 WebViewJavascriptBridge的使用
一.综述 现在很多的应用都会在多种平台上发布,所以很多程序猿们都开始使用Hybrid App的设计模式.就是在app上嵌入网页,只要写一份网页代码,就可以跑在不同的系统上.在iOS中,app多是通过W ...
随机推荐
- 搭建gerrit服务器(apache&nginx反向代理方式)
这段时间,想搭建一个gerrit,用于代码托管,gerrit的搭建,网上有很多种教程,但是自己按照别人的教程逐步操作,一直出现诸多问题.最头痛的就是:Configuration Error Check ...
- RobotFrameWork--selenium2模拟chrome的user agent
${options}= Evaluate sys.modules['selenium.webdriver'].ChromeOptions() sys, selenium.webdriver ${opt ...
- bzoj 2815
http://www.cnblogs.com/JS-Shining/archive/2013/01/12/2857429.html 题面 题解上写了用什么dominator tree,吓晕了,看了看, ...
- Ordeby then by
先按orderby排序,再按thenby排序 return PartialView("_ClickRangeOnCategory", articles.OrderByDescend ...
- jquery ajax post请求实例
function test(){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"testLogin.aspx ...
- 基于dubbo2.5.5+zookeeper3.4.9的服务搭建
参考资料:https://segmentfault.com/a/1190000009568509https://segmentfault.com/a/1190000004654903 0. 环境 Ja ...
- 09年OA系统集成商资料(转载)
[转载]哪个OA比较好,18家常见OA系统全方位大阅兵 原文地址:http://ec.zdnet.com.cn/managesoft/2009/1104/1503211.shtml 凡是比较或者评测的 ...
- 使用FFMPEG从MP4封装中提取视频流到.264文件 (转载)
命令行: ffmpeg -i 20130312_133313.mp4 -codec copy -bsf: h264_mp4toannexb -f h264 20130312_133313.264 说明 ...
- Linux 常用命令十三 kill
一.kill命令 kill命令用来删除执行中的程序或工作.kill可将指定的信息送至程序.预设的信息为SIGTERM(15),可将指定程序终止.若仍无法终止该程序,可使用SIGKILL(9)信息尝试强 ...
- 洛谷 P1606 [USACO07FEB]荷叶塘Lilypad Pond【spfa】
和bzoj同名题不一样! 起点和水点向花费一个荷花能到的第一个点连一条边权为1的有向边,然后跑计数spfa即可 #include<iostream> #include<cstdio& ...