今天项目用到加载本地html文件的需求,使用webView加载完成,但是图片和页面布局都无法正常显示。于是各种查资料,最终解决,记录下以便以后翻阅。
根据添加本地文件的方式不同,整理如下:
1.拖动文件到 Xcode,提示两个选择,create groups 和 create folder references,默认情况下为第一种,即所有加入到项目的文件都会在 mainBundle 根路径下,即不管加入项目的文件的目录结构如何,在 APP 中都可以通过 mainBundlePath/filename 来访问到;如果采用第二种方式,则就会保留相对路径,需要通过 mainBundlePath/path/filename 来访问。通过这两种方式到项目的文件夹显示具有不同的颜色。 选择 create groups ,文件夹颜色为黄色。
html里有一个路径的问题( link href= ""),在Xcode中, Xcode不能找到像url("../images/photo.png")这种路径,所以应该在Xcode中调整下html文件访问本页面图片和css样式文件的路径。
示例代码:
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
NSString *basePath = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:basePath];
[self.webView loadHTMLString:htmlString baseURL:baseURL];
要注意的就是,因为baseURL的:baseURL 操作已经把项目根目录统一在项目下,加载 index.html 中的 image , css 的话,就不再需要路径了(直接填写图片名, css 文件名),这样 html 文件就可以正常显示 html 的完整内容了。
Xcode 找到对应的 html 文件,找到( link href= ""),将类似 ../images/photo.png 的路径改为 photo.png ,去掉前面的文件夹路径,直接使用资源文件名。
2.选择 create folder references ,添加到工程里是蓝色的文件夹。这里我使用的文件夹名字为 urlName ,里面包含一个名为 index 的 html 文件。
代码如下:
NSURL * url = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"urlName"]];
NSURLRequest * request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];