转载

Native 与 UIWebView 通信 —— 实现查看大图方案（一）

背景

我们写资讯类的App经常会碰到的一个交互就是在详情页里面实现【查看大图】的功能。

但是大部分的详情页为了更好的排版都是通过用 WebView 来实现的，因为 WebView 和 Native组件 隔绝的缘故，导致我们实现【查看大图】功能是比较麻烦的，我们从图片的加载说起吧。

每次都要重新加载的图片

我们把详情页面的html套入到 UIWebView 中，产生一个详情页，里面有图片，如下图

很自然的，里面的图片是通过 img 标签的方式加载进来的，像下面这样：

<img src="address" />

OK，这里都没有问题，我们的交互通过一些工具，如 JSBridge ，在 img 标签上注册 onclick 事件，然后把 src 属性的值传入到 native组件 里，我们获取到这个图片的地址，再通过一些 ViewController 显示出来，最终结果就是这样：

一切看起来似乎很美好，但是这里有什么问题呢？对，如果我们单纯的把 src 传入到查看组件里，那么这个图片是要重新下载的。

同一张图片，在短时间内下载两次

这种事情你能忍？？？

解决方案

我们常用的查看网络上图片的组件是 SDWebImage ，它提供了很简单的 API，我们可以非常容易的在 UIImageView 上显示一个来自网络的图片。它不仅为 UIImageView 提供了一个 Category ，而且还给我们暴露了它内部缓存的相关接口：

我们可以自己把一些目前不需要显示的图片，先放进缓存里

神器啊！我只要拦截response，然后以 url 为 key ，数据为 value ，先缓存起来，在查看大图的时候，直接加载缓存内的图片，体验不就能上升好几个档次了么！好！开干！

从NSURLCache开始尝试

iOS提供了一个跟UIWebView缓存相关的拦截入口，从这里入手就好了！

- (void)storeCachedResponse:(NSCachedURLResponse *)cachedResponse forRequest:(NSURLRequest *)request {     [super storeCachedResponse:cachedResponse forRequest:request];     NSString *mimeType = cachedResponse.response.MIMEType;      if ([mimeType hasPrefix:@"image"]) {         NSString *url = request.URL.absoluteString;         NSLog(@"cache url:%@", url);          SDImageCache *cache = [SDImageCache sharedImageCache];         [cache storeImage:[UIImage imageWithData:cachedResponse.data] forKey:url toDisk:NO];     }  }

花了5分钟，直接把这段代码写下来，在 AppDelegate 中，注册了这个类。一个 Command + R 喜滋滋的等结果。

点开详情页 -- 点开图片 -- 菊花出现在眼前

excuse me??? 一看日志

cache url: https://sfault-image.b0.upaiyun.com/xxxxxxxxxxxxxx

顿时想起来我司主站上的图片全部存在了某拍云上，所有的原始图片URL都会 redirect 到实际路径下面去。。。

后来我去研究了这个路径上的 Request 和 Response 也没有一些 Referer 信息可以回溯到源地址。。好吧，只能从客户端请求上下手了。。。。

转移阵地 NSURLProtocol

那么，再祭出另一个神器 —— NSURLProtocol 它Hook了所有和 NSURLSession 有关的事件，看来比 NSURLCache 还狠啊~

#define kProtocolHandledKey @"SFProtocolHandledKey"  @interface SFURLProtocol() @property (strong, nonatomic) NSURLSessionTask *sessionTask; @end  @implementation SFURLProtocol { }  +(void) enable {     [NSURLProtocol registerClass:[SFURLProtocol class]]; }  + (BOOL)canInitWithRequest:(NSURLRequest *)request {     NSString *scheme = request.URL.scheme;         //检查标示符，是否是我们处理过的请求，如果是处理过的，那么就交给系统去加载     if ([NSURLProtocol propertyForKey:kProtocolHandledKey inRequest:request]) {         return NO;     }          //只有scheme是http或者https的我们拦截下来     return [scheme hasPrefix:@"http"]; }  + (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {     return request; }   + (BOOL)requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b {     return [super requestIsCacheEquivalent:a toRequest:b]; }  - (void)startLoading {     NSURLSession *session = [NSURLSession sharedSession];     NSMutableURLRequest *request = [self.request mutableCopy];     // 给我们处理过的请求设置一个标识符     [NSURLProtocol setProperty:@(YES) forKey:kProtocolHandledKey inRequest:request];          __weak typeof(self) weakSelf = self;          self.sessionTask = [session dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {         if (error) {             return;         }         NSString *mimeType = response.MIMEType;         if ([mimeType hasPrefix:@"image"]) {             NSString *url = weakSelf.request.URL.absoluteString;             SDImageCache *cache = [SDImageCache sharedImageCache];             [cache storeImage:[UIImage imageWithData:data] forKey:url toDisk:NO];         }                  [weakSelf.client URLProtocol:weakSelf didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowedInMemoryOnly];         [weakSelf.client URLProtocol:weakSelf didLoadData:data];         [weakSelf.client URLProtocolDidFinishLoading:weakSelf];     }];     [self.task resume]; }  - (void)stopLoading {     [self.sessionTask cancel];     self.sessionTask = nil; }

我们使用了自定义的 NSURLProtocol 对所有 http(s) 请求进行了拦截，并在资源加载完成的时候进行对 mime-type 的判断，如果是 image/** ，那我们就以请求的 URL 为 key ，把请求得到的数据转换为 UIImage 存入 SDImageCache 中。

再一次尝试，查看大图的时候就不需要再加载一次图片了，不仅省了流量，还省了等待图片加载的时间。

原文 https://segmentfault.com/a/1190000004539410

正文到此结束