UIWebview加載html鏈接時，頁面上里會有圖片、css和js，這些內容由于不經常改變，而且加載時又會耗費大量的流量，我們一般會對html中的圖片、css和js進行緩存，下一次加載這個html時會從緩存文件中讀取這些文件，本文將會通過具體代碼對這些緩存的實現方法進行說明：
1.我們先以圖片緩存為例
1.1在webview的代理方法- (void)webViewDidFinishLoad:(UIWebView*)webView里執行如下js：
NSString*js =@"var imgArray = document.querySelectorAll(\"img\"); var imgstr = ''; function f(){ for(var i = 0; i < imgArray.length; i++){ imgstr += imgArray[i].src;imgstr += ';';} return imgstr; } f();”;//這是獲取html中所有圖片鏈接的js方法
NSString*arrstr = [webViewstringByEvaluatingJavaScriptFromString:js];
NSString*newarrstr = [arrstrsubstringToIndex:arrstr.length-1];
NSArray*sepArray = [NSArrayarrayWithArray:[newarrstrcomponentsSeparatedByString:@";"]] ; //這個數組最終得到的是圖片url的數組
1.2把這些圖片通過他們的url緩存到本地
[selfdownLoadImageFromURL:sepArray];
- (void)downLoadImageFromURL:(NSArray* )imageUrlArray
{
dispatch_queue_tqueue =dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0ul);
dispatch_group_tgroup =dispatch_group_create();
for(inti =0; i < imageUrlArray.count; i++)
{
NSString*imageUrl = [imageUrlArrayobjectAtIndex:i];
NSString*key = [MD5md5:imageUrl];//把這些鏈接轉換成md5編碼，由于編碼的唯一性，用來判斷這些圖片是否已經緩存
//通過key值判斷緩存文件是否存在，如果存在就讀取緩存，不存在就對文件進行緩存
NSData*data = [FTWCacheobjectForKey:key];//FTWCache?
NSURL*imageURL = [NSURLURLWithString:imageUrl];
NSString*index = [NSStringstringWithFormat:@"%d", i];
if(data) {//如果存在就讀取緩存
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetImageUrlJavaScript:index
imgUrl:key]];
}else{//不存在就對文件進行緩存
dispatch_group_async(group, queue, ^{
NSData*data = [NSDatadataWithContentsOfURL:imageURL];
if(data !=nil) {
[FTWCachesetObject:dataforKey:key];
dispatch_sync(dispatch_get_main_queue(), ^{
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetImageUrlJavaScript:index
imgUrl:key]];
NSLog(@"image i %d",i);
});
}
});
}
}
dispatch_group_notify(group,dispatch_get_main_queue(), ^{
//這里是所有圖片下載完成后執行的操作。
});
}
- (NSString*)createSetImageUrlJavaScript:(NSString*) index imgUrl:(NSString*) url{
NSData*imageData = [FTWCacheobjectForKey:url];
NSString*imageSource = [NSStringstringWithFormat:@"data:image/jpg;base64,%@",[imageDatabase64Encoding]];
NSString*js = [NSStringstringWithFormat:@"var imgArray = document.querySelectorAll(\"img\"); imgArray[%@].src=\"%@\"", index, imageSource];
returnjs;
}
這樣我們對html中圖片的緩存就已經實現了，由于js和css的緩存方法和圖片緩存大致一樣，我們這里就只貼出相關代碼，不做解釋了。
2.js緩存
NSString*js2 =@"var jsArray = document.querySelectorAll(\"script\"); var jsstr = ''; function f(){ for(var i = 0; i < jsArray.length; i++){ jsstr += jsArray[i].src;jsstr += ';';} return jsstr; } f();";
NSString*jsstr = [webViewstringByEvaluatingJavaScriptFromString:js2];
NSString*newjsstr = [jsstrsubstringToIndex:jsstr.length-1];
NSArray*jsArray = [NSArrayarrayWithArray:[newjsstrcomponentsSeparatedByString:@";"]] ;
[selfdownLoadJSarray:jsArray];
-(void)downLoadJSarray:(NSArray*)jsArray{
dispatch_queue_tqueue =dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0ul);
dispatch_group_tgroup =dispatch_group_create();
for(inti =0; i < jsArray.count; i++)
{
NSString*jsUrl = [jsArrayobjectAtIndex:i];
NSString*key = [MD5md5:jsUrl];
NSData*data = [FTWCacheobjectForKey:key];
NSURL*jsURL = [NSURLURLWithString:jsUrl];
NSString*index = [NSStringstringWithFormat:@"%d", i];
if(data) {
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetJS:index
jsUrl:key]];
}else{
dispatch_group_async(group, queue, ^{
NSData*data = [NSDatadataWithContentsOfURL:jsURL];
if(data !=nil) {
[FTWCachesetObject:dataforKey:key];
dispatch_sync(dispatch_get_main_queue(), ^{
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetJS:index
jsUrl:key]];
NSLog(@"js i %d",i);
});
}
});
}
}
dispatch_group_notify(group,dispatch_get_main_queue(), ^{
//這里是所有js下載完成后執行的操作。
});
}
- (NSString*)createSetJS:(NSString*) index jsUrl:(NSString*) jsurl{
NSData*jsData = [FTWCacheobjectForKey:jsurl];
NSString*jsSource = [NSStringstringWithFormat:@"data:text/javascript;base64,%@",[jsDatabase64Encoding]];
NSString*js = [NSStringstringWithFormat:@"var jsArray = document.querySelectorAll(\"script\"); jsArray[%@].src=\"%@\"", index, jsSource];
returnjs;
}
3.css緩存
NSString*css =@"var linkArray = document.querySelectorAll(\"link\"); var linkhref = ''; function l(){ for(var i = 0; i < linkArray.length; i++){ linkhref += linkArray[i].href;linkhref += ';';} return linkhref; } l();";
NSString*cssstr = [webViewstringByEvaluatingJavaScriptFromString:css];
NSString*newcssstr = [cssstrsubstringToIndex:cssstr.length-1];
NSArray*cssArray = [NSArrayarrayWithArray:[newcssstrcomponentsSeparatedByString:@";"]] ;
[selfdownLoadCSSarray:cssArray];
-(void)downLoadCSSarray:(NSArray*)cssArray{
dispatch_queue_tqueue =dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0ul);
dispatch_group_tgroup =dispatch_group_create();
for(inti =0; i < cssArray.count; i++)
{
NSString*cssUrl = [cssArrayobjectAtIndex:i];
NSString*key = [MD5md5:cssUrl];
NSData*data = [FTWCacheobjectForKey:key];
NSURL*cssURL = [NSURLURLWithString:cssUrl];
NSString*index = [NSStringstringWithFormat:@"%d", i];
if(data) {
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetCSS:index
cssUrl:key]];
}else{
dispatch_group_async(group, queue, ^{
NSData*data = [NSDatadataWithContentsOfURL:cssURL];
if(data !=nil) {
[FTWCachesetObject:dataforKey:key];
dispatch_sync(dispatch_get_main_queue(), ^{
[_webstringByEvaluatingJavaScriptFromString:[selfcreateSetCSS:index
cssUrl:key]];
NSLog(@"css i %d",i);
});
}
});
}
}
dispatch_group_notify(group,dispatch_get_main_queue(), ^{
//這里是所有css下載完成后執行的操作。
});
}
- (NSString*)createSetCSS:(NSString*) index cssUrl:(NSString*) cssurl{
NSData*cssData = [FTWCacheobjectForKey:cssurl];
NSString*cssSource = [NSStringstringWithFormat:@"data:text/css;base64,%@",[cssDatabase64Encoding]];
NSString*js = [NSStringstringWithFormat:@"var cssArray = document.querySelectorAll(\"link\"); cssArray[%@].src=\"%@\"", index, cssSource];
returnjs;
}
歡迎大家指導交流，qq：1192026016
