iOS开发之点击UIWebView获取被点击图片的地址并显示

加载网页时，有时候产品经理会提出一个需求：点击界面的图片，可以进行查看大图操作。下面说下我的实现思路：

给 

UIWebView

 添加 

tap手势

 ，利用手势的代理方法

-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch

可以获取到手指点击触点在界面的位置，再使用 

JS

 可以获取到该点显示的元素，这样就可以获取到 

img

 标签，拿到图片的地址。但是，这个方法是只要有手势就会响应，也就是说，只要你的手指在界面上面移动就会触发，如果说，这个时候你就将拿到的图片地址用来显示，就会出现在滑动的过程中展示大图，这个效果肯定是不符合交互过程的。那么使用这个方法我们能够做什么呢？明显的是，我们可以拿到图片的链接，但是这个方法调用的频率很高，这里需要过滤

-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
if ([gestureRecognizer isKindOfClass:[UITapGestureRecognizer class]]) {
if (gestureRecognizer == self.af_customTap) {
CGPoint touchPoint = [touch locationInView:self];
NSString *imgURL = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", touchPoint.x, touchPoint.y];
NSString *URLString = [self stringByEvaluatingJavaScriptFromString:imgURL];
self.af_isClickImage = @(NO);
if (URLString && URLString.length > 0) {
self.af_isClickImage = @(YES);
self.af_imageString = URLString;
}
}
}
return YES;
}

这个过滤可以做到拿到最近的图片的地址，简单来说就是拿到我们想要显示的图片的地址，那么现在的问题就是显示图片的时机。这个方法的任务已经完成了，所以我就再次去  

UIGestureRecognizerDelegate

 找有有关的代理方法，发现只有在这个 

-(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer;
方法中做文章了，没错就是在这个方法中实现回调。具体的代码也十分简单，注意这里我们返回的是 NO 因为我们使用这个手势，实质上面是获取手指在界面上面滑动获取位置，并不是需要添加手势事件。

- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
if (gestureRecognizer == self.af_customTap) {
if (self.af_imageString && [self.af_isClickImage boolValue]) {
!self.af_clickImage ? : self.af_clickImage(self.af_imageString);
self.af_imageString = nil;
}
return NO; /// 这里返回 NO 不需要响应手势
}

return YES;
}

现在我们看看头文件的内容：

/// 点击图片回调 返回被点击图片的地址字符串

-(void)af_didClickImageCall:(void(^)(NSString* URLString)) clickImage;

就是需要的获取 

webView

 中的图片时，使用这个方法，回调的 

Block

 会将对应的图片地址给你。这个回调方法中写展示大图的逻辑；完整的代码我会上传我的github，地址，大家也可以联系我，直接发给你。QQ:1156154406

存在的不足：实现上面是添加了一个 

tap手势

（这个手势不会影响 

webView

 原有手势的响应），但是，对于 

web

 页面的所有图片都会有回调，可能在某些使用场景下需要过滤一些图片，例如头像之类的小图片。这个还需要使用者自己修改相关的 

JS

 代码，过滤网页的某些图片标签。或者，拿到图片地址之后做相应的过滤操作。