UIWebView加載本地HTML文件

時間 2019-11-11

原文原文鏈接

一.準備HTML文件及其資源文件

使用UIWebView加載本地的HTML文件 index.html,在index.html中引用了本地的圖片、CSS文件、JS文件以及外部的圖片。
index.html內容以下 javascript

<html>
    <head>
        <link href="index.css" rel="stylesheet" type="text/css">
        <script type="text/javascript"language="javascript"src="index.js"> 
    </head>
    <body>
        <p>This is local Image</p>
	<img src="Smiley.png" width="50" height="50" />
        <hr/>
        <p>this is local image from CSS.</p>
	<div id="myimage"> </div>
	<hr/>

        <p>this is external image.</p>
	<img src="http://imglf9.ph.126.net/F37NyhuzmvHJChMARbFmHA==/1010495166409149719.jpg" width="300" height="200" />
    </body>
</html>

HTML中會顯示3張圖片，第一張是html從本地讀取的圖片，第二張是經過CSS從本地讀取的圖片，第三張是經過絕對地址從外部讀取的圖片。
index.css文件內容以下: css

body {
    padding: 0px;
    margin: 0px;
}
p {
    font-size: 15px;
    color: #808080;
    font-family: Arial, Helvetica, sans-serif;
}  

#myimage {
    background-image: url(SmallSmiley.png);
    background-repeat: repeat-x;
}

index.js文件內容爲: html

function rewrite()
{
    document.write("This text was written by an external script!")
}

index.js
還有引用到了兩個本地圖片文件:
SmallSmiley.png
Smiley.png java

二.加載本地HTML文件

將html文件及相關資源添加到項目中

須要注意的是，把js文件加入到項目時會默認將其當作須要編譯的代碼，須要在TARGETS->Build Phases中的」Compile Sources」中找到該js文件，並將其移到上面的Copy Bundle Resources中。
ios

而後在代碼中能夠用兩種方法加載。
1.第一種方式,使用loadRequest:方法加載本地文件NSURLRequest web

NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL* url = [NSURL fileURLWithPath:path];
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
[webView loadRequest:request];

2.第二種方式,使用loadHTMLString:baseURL:加載HTML字符串 windows

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[webView loadHTMLString:html baseURL:baseURL];

加載後的顯示效果以下,本地圖片,CSS加載的本地圖片，以及外部圖片均可以正常顯示。
app

在HTML頁面加載完畢後，咱們可使用UIWebView的stringByEvaluatingJavaScriptFromString:方法執行javascript語句。以下： iphone

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    [webView stringByEvaluatingJavaScriptFromString:@"rewrite();"];
}

執行js代碼後，頁面顯示就變成了
ui

三.關於baseURL

loadHTMLString:baseURL:方法的第二個參數是baseURL,baseURL即HTML字符串中引用到資源的查找路徑，沒有引用外部資源時，能夠直接傳nil;若引用了外部資源，通常狀況下使用mainBundle的路徑便可，即

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

這是由於,Xcode項目中的文件路徑都是虛擬的，在APP中實際不存在，即在APP中，幾乎全部的文件均可以從mainBundle根目錄下直接訪問，固然，例外老是存在的。

在將文件/文件夾加入到項目時，有這樣兩個選項「Create Folder References for any added folders」和「Recursively create groups for any added folders」。

默認狀況下爲第一種，即全部加入到項目的文件都會在mainBundle根路徑下，即無論加入項目的文件的目錄結構如何，在APP中均可以經過mainBundlePath/filename來訪問到；若是採用第二種方式，則就會保留相對路徑，須要經過mainBundlePath/path/filename來訪問。經過這兩種方式到項目的文件夾顯示具備不一樣的顏色，以下

images1目錄是使用「Create Folder References for any added folders」增長的目錄,images2目錄是使用「Recursively create groups for any added folders」增長的目錄。

獲取images1目錄下文件的代碼以下:

NSString* image1Path = [[NSBundle mainBundle] pathForResource:@"image1"ofType:@"jpg"];
NSString* image11Path = [[NSBundle mainBundle] pathForResource:@"image11"ofType:@"jpg"];

images1和images11目錄實際是不存在的,下面代碼返回的路徑都是nil

NSString* images1Dir = [[NSBundle mainBundle] pathForResource:@"images1"ofType:nil];
NSString* images11Dir = [[NSBundle mainBundle] pathForResource:@"images11"ofType:nil];

對於images2目錄以及目錄下的文件路徑，其在APP中仍然保持了目錄關係，就不能用上述方法獲取，並且目錄路徑是真實存在的，應該使用的代碼以下:

NSString* images2Path = [[NSBundle mainBundle] pathForResource:@"image2"ofType:@"jpg"inDirectory:@"images2"];
NSString* image22Path = [[NSBundle mainBundle] pathForResource:@"image22"ofType:@"jpg"inDirectory:@"images2/images22"];
NSString* images2Dir = [[NSBundlemainBundle] pathForResource:@"images2"ofType:nil];
NSString* images2Dir = [[NSBundle mainBundle] pathForResource:@"images22"ofType:nilinDirectory:@"images2"];

還有一種比較特殊的目錄是以.bundle爲後綴的目錄,將其加入到項目是無論選擇的是哪一個選項，其都會保持其目錄結構。

對子bundle的訪問，能夠經過同images2目錄相同的方法訪問，但通常狀況下是先獲取到子Bundle,再經過子Bundle獲取到其裏面的資源。

NSBundle *bundle = [NSBundle bundleWithPath:[[NSBundle mainBundle] pathForResource:@"images" ofType:@"bundle"]];
NSString* imagebPath = [bundle pathForResource:@"imageb"ofType:@"jpg"];
NSString* imagebbPath = [bundle pathForResource:@"imagebb"ofType:@"jpg" inDirectory:@"imagesb"];

參考:
How to load local HTML resouces in UIWebView
UIWebView and JavaScript
UIWebView如何加載CSS？
UIWebView – Loading External Images and CSS
Using iPhone UIWebView Class with local CSS & JavaScript resources
UIWebView – The Most Versatile Class in UIKit