iOS的webView如何实现html的离线缓存

[yang0123shu]

如题，UIWebView发起一个请求，返回格式是html，有少量图片，其余为文字。使用webView怎样才能完成只需加载一次，后面不会再发请求？纠结了半个月了也没法。用RNCacheprotocol无效。刚入此行，求指导！

[空杯子_]

这个实现难点在缓存图片上。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代码如下：

//获取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;
}

[空杯子_]

完整的通过正则获取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./?%&=-]*)匹配到的内容
    }

}

[空杯子_]

关于这个解决方案，我已经把思路和核心实现的代码都贴出来了。 有问题你再在帖子里提问，我有时间了尽量回答。

[yang0123shu]

NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil]; 获取到Html数据，但是引用你得代码片，有些没有相应的系统方法啊，麻烦你分享下可以可用的demo，好嘛，先谢谢了！

[crilbaby]

同求demo

[空杯子_]

引用 4 楼 yang0123shu 的回复:

NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil]; 获取到Html数据，但是引用你得代码片，有些没有相应的系统方法啊，麻烦你分享下可以可用的demo，好嘛，先谢谢了！

我的代码是一个项目，不能公开，现在还没时间专门摘出来做demo。有的方法如果没有的话，一般都是第三方库，搜索一下就有了。

[yang0123shu]

NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil]; 最终我还是选择直接把htmlResponseStr写文件，算是勉强解决了，还是要谢谢你的指导，谢谢！

[linyawen]

不错，有帮助哦哈

[xhz0813]

[self createSetImageUrlJavaScript:index imgUrl:key] keg的格式是：21fc942c87979e4f33fa4be0567af388，替换后 var imgArray = document.getElementsByTagName('img'); imgArray[2].src="21fc942c87979e4f33fa4be0567af388"; imgArray[2].width="300";imgArray[2].height="199" ; 图片不显示呀？

[Must奋斗]

用 HTML5特性 Application和localStrorage 去做 会更简单。

[jh10622110]

有必要这么麻烦么还弄这么多JS代码，直接一个NSURLProtocol全部搞定了

[NearKong6462]

引用 7 楼 yang0123shu 的回复:

NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil]; 最终我还是选择直接把htmlResponseStr写文件，算是勉强解决了，还是要谢谢你的指导，谢谢！

能分享一下demo么，先谢了

[yang0123shu]

引用 12 楼 NearKong6462 的回复:

[quote=引用 7 楼 yang0123shu 的回复:] NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil]; 最终我还是选择直接把htmlResponseStr写文件，算是勉强解决了，还是要谢谢你的指导，谢谢！

能分享一下demo么，先谢了[/quote] 就是写进文件，然后判断是否存在来发起请求或者加载本地文件 代码片段 NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil]; NSString *resourcePath = [ [NSBundle mainBundle] resourcePath]; [_fileManager createDirectoryAtPath:[resourcePath stringByAppendingString:@"/Caches"] withIntermediateDirectories:YES attributes:nil error:nil]; NSString * path=[resourcePath stringByAppendingString:[NSString stringWithFormat:@"/Caches/%d.html",[urlStr hash]]]; [htmlResponseStr writeToFile:path atomically:YES encoding:NSUTF8StringEncoding error:nil];

[tuntunfc]

楼主之前用的是RNCachingURLProtocol吗

[迷你的心]

求大神给个 demo [e-mail] 谢谢

[qq_34285459]

楼主你好，我用你的代码出现好多错误，请把您这里写的 FTWCache， DDLOG， DDLOG_CURRENT_METHOD， listImage这几个解释一下或者贴一下这几个的定义

[qq_34285459]

请问楼主怎么解决的这个问题，求教！！！

[qq_33991593]

能分享下代码吗？ [e-mail]

[qq_34485391]

求大神的demo。

[qq_34485391]

完成符合我公司的要求。求demo已经向了一个多星期了。[e-mail]