WKWebview加载本地html问题汇总

2020-06-06 本文已影响0人黑炭长

最近做的功能,有部分逻辑是h5实现的,我们采用了本地+网络的机制来提高h5的显示速度,首先说一下机制,

1.本地存在一份html文件+校验码
2.程序启动获取远程校验码
3.远程校验码与本地校验码,比对,不同则下载最新html文件到沙盒
4.加载html首先看沙盒路径是否有html文件,优先加载沙盒,再次加载工程内部文件

ps:这里有个下载的问题,若是沙盒相同路径存在同一文件,从网络下载的话,不会覆盖原文件,导致不能覆盖老的文件,校验出问题,

解决方法:

1.下载之前先删除相应文件(有风险)
2.设置缓冲区,下载到缓冲区完成后再删除工作区文件,拷贝缓冲区文件到工作区(推荐)

以下说一下WKWebview加载本地html文件和html字符串出现的两个问题

html加载本地html文件:

1.通常的加载方式加载工程内部或是网络数据个别机型和系统也可以加载沙盒的html,亲测在iphone6中这种方式加载不出沙盒的数据

NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"lineSte"]];// 服务器
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:@"locationPath"]];// 本地url地址

[self.webView loadRequest:self.model.URLRequest];

2.加载沙盒html文件,iphone若是需要加载沙盒html文件需要用这个方法,iOS9有效

// 这里需要两个参数,本地html文件的url地址,这里说的是文件的url而非路径
// 还有一个是html文件存放的路径一般是上级的任意一个路径都可以
[self.webView loadFileURL:self.model.URL allowingReadAccessToURL:[NSURL fileURLWithPath:self.model.allowingReadAccessPath]];

3.直接加载html字符串

[self.myWebView loadHTMLString:[self setHtmlStringWithContent:threadModel.body cssStyle:nil jsUrl:nil] baseURL:nil];

// 配置blog h5数据
- (NSString *)setHtmlStringWithContent:(NSString *)content cssStyle:(NSString *)cssStyle jsUrl:(NSString *)jsUrl{
    
#pragma mark = 此处添加标注 若是html文件和css,js都是本地,可以使用本地的css、js文件,若是像这种直接拼接的html 字符串,html会找不到本地的路径,只能使用网络地址
    
    NSString *cssStyle = @"http://1.css";
    NSString *jsUrl = @"http://1.js";
    
    // 获取字体颜色r,g,b
    UIColor       *color = [UIColor blackColor];
    const CGFloat *components = CGColorGetComponents(color.CGColor);
    int           r = components[0] * 255;
    int           g = components[1] * 255;
    int           b = components[2] * 255;
    // 组建成#rgb的文本形式
    NSString       *colorStr = [NSString stringWithFormat:@"%0x%0x%0x", r, g, b];
    colorStr = @"515151";
    const NSString *htmlHead = @"<!DOCTYPE html><html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\" />";
    
    //css
    NSString *css = nil;
    css = [NSString stringWithFormat:@"<link type='text/css' rel='stylesheet' href=\"%@\" media='all'>",cssStyle];
    
    //js
    NSString *js = [NSString stringWithFormat:@"<script src=\"%@\" type='text/javascript'></script>",jsUrl];
    
    const NSString *htmlBlogContentStart = [NSString stringWithFormat:@"</head><body><div class=\"contentBox\">"];
    const NSString *htmlBlogContentEnd = @"</div></body></html>";
    

    NSString *html = [NSString stringWithFormat:@"%@%@%@%@%@%@",htmlHead,css,js,htmlBlogContentStart,content,htmlBlogContentEnd];
    
    return html;
}

// 这种方式本身没有问题,但是像我们的需求,css和js文件放在本地,此时若是在htmlStr添加css和js的本地读取路径(路径写绝对路径),看不到任何效果,猜测自己拼接的html字符串加载本地css和js文件,会获取不到文件,没看出什么原因(知道原因的小伙伴欢迎留言)

根据上述3的情况果断联系后端,搞了css和js文件的服务器连接,解决问题