webView图片点击可以实现预览效果

  最近做项目遇到了webview加载后图片点击可以实现图片预览效果的需求。

  如果要实现这个需求我们要保证webview和html是交互的否则我们加载的webview上面的图片是不能实现点击效果的。那么如何实现交互呢,其实很简单,我们只需要往调用的webview页面里加入一段js代码就可以了

一:我们创建一个js的方法:

//创建JS

- (NSString *)createJavaScript

{

NSString *js = @"var imgArray = document.getElementsByTagName(‘img‘);for(var i = 0; i < imgArray.length; i++){var img = imgArray[i];img.onclick=function(){var url=‘lfyprotocol:‘+this.src;document.location = url;}}";

return js;

}

二:我们在webViewDidFinishLoad实现以下调用就可以了:

NSString *str = [webView stringByEvaluatingJavaScriptFromString:[self createJavaScript]];

NSLog(@"--------finish=%@",str);

三:图片实现点击效果之后的实现方法要在

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType这个方法中实现

按照前两步执行,我们在这个方法中NSLog(@"图片是可点击的"); 我们会很愉快的发现我们成功的输出了内容。

四:当然我们要的不仅仅是输图片可点的消息,

NSString *requestURL = [[request URL] absoluteString] ;

NSArray *components = [requestURL componentsSeparatedByString:@":"];

NSLog(@"%@",components);

if ([components count]>1&&[(NSString *)[components objectAtIndex:0] isEqualToString:@"lfyprotocol"]) {

if ([(NSString *)[components objectAtIndex:1] isEqualToString:@"http"]||[(NSString *)[components objectAtIndex:1] isEqualToString:@"https"] ) {

//图片的路径

NSString *path = [NSString stringWithFormat:@"%@:%@",[components objectAtIndex:1],[components objectAtIndex:2]];

NSLog(@"%@",path);

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"图片地址" message:path delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil];

[alert show];

[alert release];

NSLog(@"%@",self.imgConArray);

for (int i = 0; i < [self.imgConArray count]; i++) {

NSString *url = [[imgConArray objectAtIndex:i] objectForKey:@"data-original"];

NSString *astring = [[imgConArray objectAtIndex:i] objectForKey:@"title"];

NSLog(@"-----%@-----%@----",url,astring);

}

}

通过这个方法我们的图片url就成功的获取到了,当然这只是获取到的我们所点击的图片的路径,如果你想获取到html里面所有的图片url那么:

你需要对html进行遍历:

abRequest =[[NSURLRequest requestWithURL:[NSURL URLWithString:self.URLString]] retain];

NSData *ceResponse = [NSURLConnection sendSynchronousRequest:abRequest returningResponse:nil error:nil];

TFHpple *doc = [[TFHpple alloc] initWithHTMLData:ceResponse];

NSArray *images = [doc searchWithXPathQuery:@"//img"];

for (int i = 0; i < [images count]; i ++) {

TFHppleElement *dic = [images objectAtIndex:i];

NSString *imgUrl = [dic objectForKey:@"data-original"];

NSLog(@"%@=====",imgUrl);

NSString *imgTitle = [dic objectForKey:@"title"];

[self.imgConArray addObject:imgUrl];

[self.titleArray addObject:imgTitle];

}

这个方法中我们用到了一个第三方的类TFHpple我们用它对html进行遍历。相信获取到所有图片的链接之后的预览对你来说就是小菜一碟了。如果你有点懒不想写的话推荐你一个第三类MWPhotoBrowser,他可以很好地帮你实现预览图片的效果。

时间: 2024-11-03 22:45:54

webView图片点击可以实现预览效果的相关文章

Android 手势检测实战 打造支持缩放平移的图片预览效果(下)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图片,简单介绍了下Matrix:具体请参考:Android 手势检测实战 打造支持缩放平移的图片预览效果(上):本篇继续完善我们的ImageView~~ 首先加入放大后的移动~~ 1.自由的进行移动 我们在onTouchEvent里面,加上移动的代码,当然了,必须长或宽大于屏幕才可以移动~~~ @Ov

实现QQ空间图片预览效果

今天项目遇到需求 要求 实现图片预览效果 .  类似于扣扣空间那种,本人也到网上找过 代码量太大了   ,类多到处是注释看的有点恶心 .然后自己写了一个图片预览的效果,其实很简单的 . 首先我们来分析一下 实现原理 :点击 图片 显示 新的窗口  滑动显示下一张  并且页码也跟随的变化, 轻触退出(本文代码没有) ;首先点击图片实现跳转时应该 携带当前图片页码 呵呵 gridview 里所有图片 地址信息 ,然后另一个显示图片页面实现可以用viewpager  事先加载好 然后 设置显示当前页

图片上传即时预览效果

做项目时一同事推荐的一个picload插件,实现图片上传后,即时预览效果,感觉很不错,分享出来. 点击上传图片后.立即看到预览的效果如下图: 布局代码: <div class="banner" id="CoupicPicYes">图片预览</div> <a class="input-file" href="javascript:void(0);" onclick="$('#photoUp

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture(){     var file = $('file_c').value;     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")        }else{      $('both_form')

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简单的demo来实现 本地上传图片即时预览效果.其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果.在IE10以下浏览器用了滤镜来解决图片显示问题.在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,

js的FileReader实现图片文件上传、预览

js的FileReader实现图片文件上传.预览 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料:而缺点便是,网页的大小可能会变大.它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用.您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件.1

javascript和HTML5上传图片之前实现预览效果

一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内允许一次放置多个文件,控件内的每一个用户选择的文件都是一个file对象,而FileList对象是file对象的列表: 比如如下代码: 选择文件<input type="file" id="file" multiple size="80"/>