【IOS 开发】UIWebView 加载本地文件,多层的网页目录结构失败分析和解决,以及demo

时间:2022-06-15 12:21:24

此方案解决了如下问题:


有一个本地可以打开的网页,这个网页是一个文件夹。文件夹里面是一个index.html。 同级还有其他的文件夹。 如图:


【IOS 开发】UIWebView 加载本地文件,多层的网页目录结构失败分析和解决,以及demo


要求使用 UIWebView 把此网页完全加载,使用普通方法加载是这样的:


【IOS 开发】UIWebView 加载本地文件,多层的网页目录结构失败分析和解决,以及demo



分析:


使用普通的本地加载方式有两种方法

第一种,把本地文件初始化成Request,让webview 加载Request

    NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:htmlPath];
[aWebView loadRequest:[NSURLRequest requestWithURL:url]];
第二种,把本地文件的数据包装成NSData,让UIWebview实例对象加载
    NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];    NSURL *url = [NSURL fileURLWithPath:htmlPath];    [aWebView loadRequest:[NSURLRequest requestWithURL:url]];
发现可以加载 index.html,但问题来了,CSS,JS,IMAGES都没有加载进来

通过products下的文件,在Findle中展示。点击右键——现实内容,会发现导入的网页的目录结构没有了,里面是一个个文件在同一目录下。


【IOS 开发】UIWebView 加载本地文件,多层的网页目录结构失败分析和解决,以及demo


这就是问题产生的原因:文件结构破坏,导致不能找到资源


解决办法:


想办法保留文件夹结构。

Bundle 是一种保存了文件结构的数据存储方式,把本地网页文件夹打包成 bundle 结构就可以了
xxx.bundle 是文件夹xxx 加上后缀生成的, index.html 是 文件夹下 xxx 的文件
代码中  baseURL 是一个非常重要的字段,这个字段传入 *路径(也就是 xxx.bundle 的路径)

工程结构如下


【IOS 开发】UIWebView 加载本地文件,多层的网页目录结构失败分析和解决,以及demo


最后的加载方式如下:

NSString *bundleFile = [[NSBundle mainBundle] pathForResource:@"xxx" ofType:@"bundle"];
NSString *htmlFile = [bundleFile stringByAppendingPathComponent:@"/index.html"];

NSData *htmlData = [NSData dataWithContentsOfFile:htmlFile];
[aWebView loadData:htmlData MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:[NSURL fileURLWithPath:bundleFile]];

Demo 下载地址:https://github.com/caigee/iosdev_sample

下的UIWebLoadLocalFiles

厚吾http://blog.csdn.net/mangosnow

本文遵循“署名-非商业用途-保持一致”创作公用协议