最近做项目遇到了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，他可以很好地帮你实现预览图片的效果。