加载本地HTML/js/css问题

た入场券 2021-09-10 08:02 433阅读 0赞

在项目中遇到一个问题：将H5的文件拖入项目中，在webView上添加H5,运行时发现H5的样式没有了。加载出来的效果如下:

![26470452-322a4e6be8b7f0a7.png][]

错误样式

出现这种问题一般是资源路径读取的问题，我们把包含 HTML 文件的文件夹拖入工程的时候一般情况下是这样的：

![26470452-14eb915b797af3db.png][]

添加文件

一般情况下我们的都是选的 Create Groups 选项，工程中被加入的文件夹是黄颜色的，如下：

![26470452-2c79abd62d00c9f8.png][]

工程中文件夹

以这种方式加入工程的文件夹，文件夹下的文件在iOS沙盒中全都被保存在一个 mainBundle 根路径下，即不管加入项目的文件的目录结构如何，在 APP 中都可以通过 mainBundlePath/filename 来访问到，而原来的目录结构则不存在了。而 HTML 中的图片和 CSS 文件的引用方式写的则是绝对路径。因此在HTML文件中的路径就会出现问题。如果你选择了这种引入方式那么HTML文件中引入CSS，js，图片等就不需要添加前缀路径了，直接写文件名就行

引入文件方式：

> NSString \* htmlPath =\[\[NSBundle mainBundle\] pathForResource:@"index" ofType:@"html"\];
> 
> NSString \* htmlString = \[NSString stringWithContentsOfFile:htmlPath
> 
> encoding:NSUTF8StringEncoding error:nill;
> 
> NSURL \*baseURL = \[NSURL fileURLWithPath:\[\[NSBundle mainBundle\] resourcePath\]\];
> 
> \[self.webView loadHTMLString:htmlString baseURL:baseURL\];

还有一种办法就是在选择 Added folders 选项时选择 Create folder references

![26470452-8b381f5551abc3c3.png][]

Create folder references

这时加入工程的文件夹是蓝颜色的

![26470452-3774539276d18095.png][]

APP编译过后引入的文件会按照原本的目录结构存放，这个时候就需要添加相对路径。

> NSURL \*path = \[NSURL URLWithString:@"app/views/index.html" relativeToURL:\[\[NSBundle mainBundle\] bundleURL\]\];
> 
> \[self.webView loadRequest:\[NSURLRequest requestWithURL:path\]\];

[26470452-322a4e6be8b7f0a7.png]: /images/20210825/6c251147846b4d33a3eaa727b80cb781.png
[26470452-14eb915b797af3db.png]: /images/20210825/737ea0b5eba64573a9139b37cbe07908.png
[26470452-2c79abd62d00c9f8.png]: /images/20210825/f815c653029340cead8ba6e945c15e6e.png
[26470452-8b381f5551abc3c3.png]: /images/20210825/a71fcfdb7a144dd98755a78c4340d280.png
[26470452-3774539276d18095.png]: /images/20210825/37b9c4285d1d4a1baa2b258cece33494.png