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