UIWebView+AppFrame 获取被点击图片的地址

加载网页时,有时候产品经理会提出一个需求:点击界面的图片,可以进行查看大图操作。可是,我之前一直觉得这是需要和前端同事合作才能完成。最近自己利用网上公布的知乎日报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 代码,过滤网页的某些图片标签。或者,拿到图片地址之后做相应的过滤操作。

参考博客:地址

你可能感兴趣的