iOS webView怎样实现html的离线缓存

这个实现难点在缓存图片上。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./?%&=-]*)匹配到的内容
    }
}

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

NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil];

获取到Html数据，但是引用你得代码片，有些没有相应的系统方法啊，麻烦你分享下可以可用的demo，好嘛，先谢谢了！

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

NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil];

最终我还是选择直接把htmlResponseStr写文件

[self createSetImageUrlJavaScript:index         imgUrl:key]

keg的格式是：21fc942c87979e4f33fa4be0567af388，替换后

var imgArray = document.getElementsByTagName(“”img””); imgArray[2].src=”21fc942c87979e4f33fa4be0567af388″; imgArray[2].width=”300″;imgArray[2].height=”199″ ;

图片不显示呀？

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

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

就是写进文件，然后判断是否存在来发起请求或者加载本地文件

代码片段

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];