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

现在的位置: 首页 > 综合 > 正文

RSS

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

2018年04月19日 ⁄ 综合 ⁄ 共 1319字 ⁄ 字号小中大 ⁄ 评论关闭

此方案解决了如下问题：

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

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

分析：

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

第一种，把本地文件初始化成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中展示。点击右键——现实内容，会发现导入的网页的目录结构没有了，里面是一个个文件在同一目录下。

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

解决办法：

想办法保留文件夹结构。

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

工程结构如下

最后的加载方式如下：

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）

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