如题,UIWebView发起一个请求,返回格式是html,有少量图片,其余为文字。使用webView怎么才能完成只需加载一次,后面不会再发请求?纠结了半个月了也没法。用RNCacheprotocol无效。刚入此行,求指导!
解决方案
20
这个实现难点在缓存图片上。html代码的缓存对你来说不是问题吧。基于这个前提,
下面这个方案是本人本人做的,也具体在项目实现了。思路是这样的:
第1步、先获取html页面里全部图片地址。
方法一:离线获取获取到html代码。html代码你可以把他理解成是一个很长的字符串。通过正则表达式把这个html页面里的全部img标签url。假如是相对url,就加上host。假如是绝对url,就直接下载。这样这个页面里的全部图片路径都拿到了。
方法一的获取img标签url的正则表达式:
NSString *urlPattern = @”<img[^>]+?src=[“”]?([^>””]+)[“”]?”;
方法二:通过webview和js 本地程序的交换,获取到html页面全部图片下载地址。
webview和本地程序交互的方法是_detailWebView stringByEvaluatingJavaScriptFromString。
这是方法二获取图片url的js代码如下:
下面这个方案是本人本人做的,也具体在项目实现了。思路是这样的:
第1步、先获取html页面里全部图片地址。
方法一:离线获取获取到html代码。html代码你可以把他理解成是一个很长的字符串。通过正则表达式把这个html页面里的全部img标签url。假如是相对url,就加上host。假如是绝对url,就直接下载。这样这个页面里的全部图片路径都拿到了。
方法一的获取img标签url的正则表达式:
NSString *urlPattern = @”<img[^>]+?src=[“”]?([^>””]+)[“”]?”;
方法二:通过webview和js 本地程序的交换,获取到html页面全部图片下载地址。
webview和本地程序交互的方法是_detailWebView stringByEvaluatingJavaScriptFromString。
这是方法二获取图片url的js代码如下:
//获取web里的全部的img url - (NSString *)createImgArrayJavaScript{ NSString *js = @"var imgArray = document.getElementsByTagName("img"); var imgstr = ""; function f(){ for(var i = 0; i < imgArray.length; i++){ imgstr += imgArray[i].src;imgstr += ";";} return imgstr; } f();"; return js; } //返回web img图片的数量 - (NSString *)createGetImgNumJavaScript{ NSString *js = @"var imgArray = document.getElementsByTagName("img");function f(){ var num=imgArray.length;return num;} f();"; return js; }
第2步、把下载图片到本地,把本地的图片设置到html代码中去显示。
通过上面说的两个方法,你可以获取到图片地址了并且能下载到本地了。那没网络的情况下怎么把这些图片再设置到html页面里呢?
方法:下载到本地的图片命名一律使用图片url的md5。原因是url直接做不了图片的名称。
下面这段代码演示了下载图片和设置本地图片的全过程。代码的逻辑是:有本地图片,就显示本地图片,假如没有则从网络获取。还有对应的js代码。设置图片是还判断图片的宽度,大于300时,就等比例缩小。
- (void)downLoadImageFromURL:(NSArray* )imageUrlArray { dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0ul); dispatch_group_t group = dispatch_group_create(); for (int i = 0; i < imageUrlArray.count; i++) { NSString *imageUrl = [imageUrlArray objectAtIndex:i]; NSString *key = [imageUrl MD5Hash]; NSData *data = [FTWCache objectForKey:key]; NSURL *imageURL = [NSURL URLWithString:imageUrl]; NSString *index = [NSString stringWithFormat:@"%d", i]; if (data) { [_detailWebView stringByEvaluatingJavaScriptFromString:[self createSetImageUrlJavaScript:index imgUrl:key]]; }else{ dispatch_group_async(group, queue, ^{ NSData *data = [NSData dataWithContentsOfURL:imageURL]; if (data != nil) { [FTWCache setObject:data forKey:key]; dispatch_sync(dispatch_get_main_queue(), ^{ [_detailWebView stringByEvaluatingJavaScriptFromString:[self createSetImageUrlJavaScript:index imgUrl:key]]; DDLOG(@"image i %d",i); }); } }); } } dispatch_group_notify(group, dispatch_get_main_queue(), ^{ //这里是全部图片下载完成后执行的操作。 }); dispatch_release(group); } //设置下载完成的图片到web img - (NSString *)createSetImageUrlJavaScript:(NSString *) index imgUrl:(NSString *) url{ NSData *imageData = [FTWCache objectForKey:url]; UIImage *image = [UIImage imageWithData:imageData]; int imageWidth = 300; int imageHeight = image.size.height*300.0f/image.size.width; NSString *js = [NSString stringWithFormat:@"var imgArray = document.getElementsByTagName("img"); imgArray[%@].src="%@"; imgArray[%@].width="%d";imgArray[%@].height="%d" ;" , index, url, index,imageWidth,index,imageHeight]; return js; }
20
完整的通过正则获取html代码中的全部图片url的代码如下:
- (void) getImageUrlArray:(NSString*) content { DDLOG_CURRENT_METHOD; NSString *urlPattern = @"<img[^>]+?src=[""]?([^>""]+)[""]?"; NSError *error = [NSError new]; NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:urlPattern options:NSRegularExpressionCaseInsensitive error:&error ]; //match 这块内容非常强大 NSUInteger count =[regex numberOfMatchesInString:content options:NSRegularExpressionCaseInsensitive range:NSMakeRange(0, [content length])];//匹配到的次数 if(count > 0){ NSArray* matches = [regex matchesInString:content options:NSMatchingReportCompletion range:NSMakeRange(0, [content length])]; for (NSTextCheckingResult *match in matches) { NSInteger count = [match numberOfRanges];//匹配项 for(NSInteger index = 0;index < count;index++){ NSRange halfRange = [match rangeAtIndex:index]; if (index == 1) { [listImage addObject:[content substringWithRange:halfRange]]; } } }//遍历后可以看到三个range,1、为整体。2、为([\w-]+\.)匹配到的内容。3、(/?[\w./?%&=-]*)匹配到的内容 } }