iOS 加載本地 HTML 文件 CSS 樣式圖片無效果

在開發的過程中，有時候需要加載一些 HTML 頁面，對於不太復雜的界面，基本上都可以放到本地用 UIWebview 來加載，但是在開發過程中會碰到 UIWebview 加載出來的 HTML 頁面沒有圖片和 CSS 樣式

加載出來的效果如下圖：

 

出現這種問題一般是資源路徑讀取的問題，我們把包含 HTML 文件的文件夾拖入工程的時候一般情況下是這樣的：

 

一般情況下我們的 Added folders 選項都是選的 Create Groups 選項，工程中被加入的文件夾是黃顏色的

 

問題就出在這個 Create Groups 上面，以這種方式加入工程的文件夾，文件夾下的文件在iOS沙盒中全都被保存在一個 mainBundle 根路徑下，即不管加入項目的文件的目錄結構如何，在 APP 中都可以通過 mainBundlePath/filename 來訪問到，而原來的目錄結構則不存在了。而 HTML 中的圖片和 CSS 文件的引用方式寫的則是絕對路徑。因此 HTML 中的路徑就不對，需要把引用文件的代碼如：

href="css/min/home.min.css" src="images/qq.gif"

全部替換為這種樣式，不用寫路徑了

href="min.css" src="qq.gif"

代碼如下：

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]；

這樣工作量是很大的，還有一種辦法就是在選擇 Added folders 選項時選擇 Create folder references

 

這時加入工程的文件夾是藍顏色的

 

這樣，就可以正確的加載出我們想要的效果了

 

代碼如下：

UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; webView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; webView.scrollView.bounces = NO; webView.delegate = self; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"movie-item" ofType:@"html" inDirectory:@"web/movie"]]]]; [self.view addSubview:webView];

這時需要注意 HTML 文件路徑要寫正確。

文／zyfoolboy（簡書作者）
原文鏈接：http://www.jianshu.com/p/00b9e4d6c807
著作權歸作者所有，轉載請聯系作者獲得授權，並標注“簡書作者”。