文档章节

UIWebView加载本地HTML文件

xrk
 xrk
发布于 2014/02/11 13:41
字数 1151
阅读 141
收藏 2

一.准备HTML文件及其资源文件

使用UIWebView加载本地的HTML文件 index.html,在index.html中引用了本地的图片、CSS文件、JS文件以及外部的图片。
index.html内容如下

<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文件内容如下:

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文件内容为:

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

index.js
还有引用到了两个本地图片文件:
SmallSmiley.png
Smiley.png

二.加载本地HTML文件

将html文件及相关资源添加到项目中

需要注意的是,把js文件加入到项目时会默认将其当做需要编译的代码,需要在TARGETS->Build Phases中的”Compile Sources”中找到该js文件,并将其移到上面的Copy Bundle Resources中。

然后在代码中可以用两种方法加载。
1.第一种方式,使用loadRequest:方法加载本地文件NSURLRequest

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字符串

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加载的本地图片,以及外部图片都可以正常显示。

在HTML页面加载完毕后,我们可以使用UIWebViewstringByEvaluatingJavaScriptFromString:方法执行javascript语句。如下:

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

执行js代码后,页面显示就变成了

三.关于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

本文转载自:http://www.winddisk.com/2012/09/24/uiwebview_load_local_html_file/

xrk

xrk

粉丝 1
博文 44
码字总数 13690
作品 0
朝阳
程序员
私信 提问
浅谈WKWebView使用、JS的交互

前言 WKWebView是iOS8 出来的浏览器控件,用来取代UIWebView.对于WKWebView与UIWebView的对比特点,这里就不过多的叙述,都算是老生常谈的问题了,网上的说明也很多.近来在做Web端,需要植入移动端...

神经骚栋
2018/07/03
0
0
IOS——UIWebView基本使用与JS交互

1、UIWebView的几种加载方式 加载本地的HTML文件 通过NSURLRequest加载: 通过NSString加载: UIWebView 还支持将一个NSString对象作为源来加载。你可以为其提供一个基础URL,来指导UIWebVi...

一人丨星空
2016/09/23
270
0
iOS UIWebView 使用大全

一、UIWebView的基础使用 以上是IOS中UIWebView的基础使用要点详解,接下来一些UIWebView的常用注意点。 二、IOS中UIWebView常用注意点: 1、与UIWebView进行交互,调用web页面中的需要传参的...

朝雨晚风
2016/08/15
0
0
与webView进行交互,webView小记

一、与webView进行交互,调用web页面中的需要传参的函数时,参数需要带单引号,或者双引号(双引号需要进行转义在转义字符前加),在传递json字符串时不需要加单引号或双引号。 -(void)webVi...

山不在高有仙则名
2012/08/04
6.5K
1
如何解决UIWebview+UIPageViewController 翻页不流畅的问题

最近在做一个基于IOS的 epub reader, 基本的实现思路就是用UIWebview 显示epub内的xhtml文件。为了实现类似iBooks模拟翻页效果,所以用到了IOS5提供的UIPageViewController 。 具体的实现思...

Larrylu
2013/01/23
2.1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Eureka应用注册与集群数据同步源码解析

在之前的EurekaClient自动装配及启动流程解析一文中我们提到过,在构造DiscoveryClient类时,会把自身注册到服务端,本文就来分析一下这个注册流程 客户端发起注册 boolean register() t...

Java学习录
23分钟前
5
0
Java描述设计模式(15):责任链模式

本文源码:GitHub·点这里 || GitEE·点这里 一、生活场景描述 1、请假审批流程 公司常见的请假审批流程:请假天数 当 day<=3 天,项目经理审批当 3<day<=5 天,部门经理审批当 day>5 天...

知了一笑
34分钟前
6
0
总结:数组与链表

1、内存申请:数组在内存上是连续的空间;链表,内存地址上可以是不连续的。 2、查询速度:数组可以随机访问,链表必须顺序访问,即从首个元素开始遍历,逐个查找,所以数组查询很快。 3、写入...

浮躁的码农
42分钟前
6
0
HashMap源码分析

read

V丶zxw
今天
5
0
Python字符串或JSON字符串转字典dict、列表list

有3种方法 1、使用ast模块 >>> import ast>>> s = '["test",1]'>>> ast.literal_eval(s)['test',1]>>> s = '{"test":1}'>>> ast.literal_eval(s){'test': 1} 2、eval函数,这个......

编程老陆
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部