加载网页时，有时候产品经理会提出一个需求：点击界面的图片，可以进行查看大图操作。可是，我之前一直觉得这是需要和前端同事合作才能完成。最近自己利用网上公布的知乎日报API，自己模拟现在的知乎日报APP去写了首页和详情页面。ZhiHURiBaodemo地址。
其中详情页面需要支持点击图片查看大图功能，这个实现困扰了我一段时间，我想了很多种方案，自己一个人折腾了好几天，现在目前最好的方案出来了，那就是 UIWebView+AppFrame 使用的demo地址.
其中实现的原理是：给 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 会将对应的图片地址给你。这个回调方法中写展示大图的逻辑；整个比较详细的使用可以看我的项目.
存在的不足：实现上面是添加了一个 tap手势（这个手势不会影响 webView 原有手势的响应），但是，对于 web 页面的所有图片都会有回调，可能在某些使用场景下需要过滤一些图片，例如头像之类的小图片。这个还需要使用者自己修改相关的 JS 代码，过滤网页的某些图片标签。或者，拿到图片地址之后做相应的过滤操作。
参考博客：地址
