加载本地HTML/js/css问题

时间:2021-7-4 作者:qvyue

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

加载本地HTML/js/css问题
错误样式

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

加载本地HTML/js/css问题
添加文件

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

加载本地HTML/js/css问题
工程中文件夹

        以这种方式加入工程的文件夹,文件夹下的文件在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 

加载本地HTML/js/css问题
Create folder references

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

加载本地HTML/js/css问题

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

NSURL *path = [NSURL URLWithString:@”app/views/index.html” relativeToURL:[[NSBundle mainBundle] bundleURL]];

[self.webView loadRequest:[NSURLRequest requestWithURL:path]];

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。