Code Bye

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

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


20分
本帖最后由 totogo2010 于 2014-07-09 23:47:35 编辑

这个实现难点在缓存图片上。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;
}

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./?%&=-]*)匹配到的内容
    }

}
关于这个解决方案,我已经把思路和核心实现的代码都贴出来了。 有问题你再在帖子里提问,我有时间了尽量回答。
NSString * htmlResponseStr=[NSString stringWithContentsOfURL:[NSURL URLWithString:urlStr] encoding:NSUTF8StringEncoding error:Nil];
获取到Html数据,但是引用你得代码片,有些没有相应的系统方法啊,麻烦你分享下可以可用的demo,好嘛,先谢谢了!
同求demo
引用 4 楼 yang0123shu 的回复:

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全部搞定了

CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明iOS的webView如何实现html的离线缓存