UIWebView加载本地HTML文件

一、 WebView简单介绍


  • WebView是iOS中比较常用的一个控件,特别是现在app不好推广,下载成本高的时代,和原生相比,它可以通过后台控制,随意更新客户端UI等等.
    • WebView 既可以显示本地的html也可以显示网络html

webView加载数据的方式文档给出了三种:

- (void)loadRequest:(NSURLRequest *)request;
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

  1. - (void)loadRequest:(NSURLRequest )request;
  • 可以加载本地资源,也可以加载网络资源
    加载网络地址
NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
[self.view addSubview:webView];
[webView loadRequest:request];

加载本地HTML

NSString *path = [[NSBundle mainBundle] pathForResource:@"file" ofType:@"html"];
NSURL* url = [NSURL  fileURLWithPath:path];//创建URL
NSURLRequest* request = [NSURLRequest requestWithURL:url];//创建NSURLRequest
[webView loadRequest:request];//加载
  1. - (void)loadHTMLString:(NSString )string baseURL:(nullable NSURL)baseURL;
  • 一般用来加载本地HTML资源
  • 如果通过Creat folder reference方式引入的文件,则需要通过路径来获取文件内容,下面两种方法是等效的
    例:
    NSString *path = [[NSBundle mainBundle] pathForResource:@"html/start" ofType:@"html"];
    NSString *htmlString1 = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:NULL];
    NSString *urlStr = [NSString stringWithFormat:@"%@/html",[[NSBundle mainBundle] bundlePath]];
    NSURL *url = [NSURL fileURLWithPath:urlStr isDirectory:YES];
      [self.webView loadHTMLString:htmlString1 baseURL:url];
    NSString *mainBundlePath = [[NSBundle mainBundle] bundlePath];
    NSString *basePath = [NSString stringWithFormat:@"%@/html",mainBundlePath];
    NSURL *baseUrl = [NSURL fileURLWithPath:basePath isDirectory:YES];
    NSString *htmlPath = [NSString stringWithFormat:@"%@/start.html",basePath];
    NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    [self.webView loadHTMLString:htmlString baseURL:baseUrl];

注意:baseURL因为html中一些资源的寻找需要到上个目录中寻找,因此要写

  • 如果通过Creat groups则可以通过文件名直接访问文件
NSString *path = [[NSBundle mainBundle] pathForResource:@"file" ofType:@"html"];

不太了解Creat groups和Creat folder reference引入文件的同学,下面详细介绍区别.

  • -(void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL )baseURL;
/**
 * data: 所加载文件的数据
 * MIMEType:文件类型
 * textEncodingName: 编码类型
 * baseURL: 资源路径
*/

webView的代理方法:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView *)webView;
- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

oc的方法名称就像句子一样,清晰明了的表达了方法的作用,因此代理我就不在啰嗦了!

二、加载本地HTML


  • 首先引入html文件到你的项目

  • 引入文件有两种选择,一般很少有人注意,分别是:Create groups和Create folder references如下图:


  • Creat groups和Creat folder reference的区别:

  • Creat groups

    1. 以Creat groups在引入的文件夹为黄色的
    2. 我们可以在项目中右键手动New Group 但是新添加的文件夹并不是真的存在于项目目录中,我们可以Show in Finder来查看项目文件结构,发现文件目录中并没有新建的文件夹.
      但是从外部引进来的group并不会如此,它在项目目录汇中是存在真实目录的,这些文件是会被编译
    3. 因此Create groups的方式添加到工程中,则不管加入项目的文件的目录结构如何,在APP中都可以通过mainBundlePath/filename这样结构来访问文件
    4. Create groups 创建的文件是参与预编译的(内部文件可以直接通过import引用)
  • Creat folder reference

    1. 以Creat folder reference在引入的文件夹为蓝色的
    2. 只是单纯的创建了引用,文件夹内部的原有文件层次架构并不会改变,所以在使用的时候需要通过mainBundlePath/Path/filename这样的路径来访问文件.
    3. 显然这种添加方法更适合我们项目需求(由于html文件内部有文件引用路径,Creat folder reference引入的文件不会破坏原有文件的层次结构)
    4. Creat folder reference创建的文件是不参与预编译的,无发通过import直接引入

总结: Creat groups和Creat folder reference的区别

  • 引入的文件夹颜色不一样
  • 文件层次结构不一样了
其它差异欢迎补充

Bundle介绍

  • 既然提到了Bundle,那我们就顺便介绍下Bundle,之前对Bundle理解是很有限的
    • 大部分iOS开发同学都不少些如何代码
[[NSBundle mainBundle] pathForResource:@"someFileName" ofType:@"yourFileExtension"]; 
[YourViewController initWithNibName:"YourViewController" bundle:nil];
  • bundle的创建 如果是图片资源的话可以直接把文件夹的后缀修改为bundle,这样就就是一个静态资源库。如果里面包含了xib和sb的话就要通过xcode创建,因为需要修改一些bundle的配置信息,比如xib转换成nib
  • bundle是静态资源静态库,包含了程序使用的资源(图片,声音,nib,编译好的代码等)
  • 一个应用程序是一个bundle,这个bundle就是我们说的main bundle

通过一下方法可以获取
[NSBundle mainBundle];

  • 如果获取其它bundle下的资源,需要指定bundle路径来获取
NSString *bundlePath =  [[NSBundle mainBundle] pathForResource:@"文件名字" ofType:@"bundle"];
NSBundle *resourceBundle = [NSBundle bundleWithPath:bundlePath];
  • 有了bundle对象之后就可以访问bundle内部资源
 NSString *resourcePath = [resourceBundle pathForResource:@"" ofType:@""];
 UIImage *image = [UIImage imageWithContentsOfFile:resourcePath];
这里有个小tap需要主要下 就是加载图片为什么用 imageWithContentsOfFile而不用imagName?
  • 先说区别吧
    • imagName加载的图片是有缓存在内存中的,下次如果用到同名的图片会直接拿缓存中的图片,而不会按照指定的路径去重新加载图片
    • imageWithContentsOfFile加载图片不会有缓存,每次都重新寻址加载

bundle居多是用来存储第三方库的资源,这样做是为了防止引入的库内的资源名字与项目名字冲突,这样可以很好的防止资源名字重复问题,但是如果你用了imagName加载图片,图片可能就会无法区分。

  • 加载HTML
  • 首先我们看一下项目的文件层次,如图:
整体结构 HTML结构
  • 加载本文右侧html的策略是通过下面这个方法来加载
    - (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL
NSString *mainBundlePath = [[NSBundle mainBundle] bundlePath];//文件根路径
NSString *basePath = [NSString stringWithFormat:@"%@/html",mainBundlePath];//获取目标html文件夹路径
NSURL *baseUrl = [NSURL fileURLWithPath:basePath isDirectory:YES];//转换成url
NSString *htmlPath = [NSString stringWithFormat:@"%@/start.html",basePath];//目标 文件路径
NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];//把html文件转换成string类型
[self.webView loadHTMLString:htmlString baseURL:baseUrl];//加载

三、加载本地HTML文件内容适配问题


  • 有时候我们app中嵌套webView,但是内容有可能过大,或者过小,这时候就需要我们调整内容大小.
    • webView自带有个属性可以供我们使用,但是往往不能够满足需求
self.webView.scalesPageToFit = YES;

因此我们可以通过代理直接修改网页的比例,可以在代理中通过下面方法来调整网页的比例大小:

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
        [webView stringByEvaluatingJavaScriptFromString:@"document.body.style.zoom=0.52"];
}

代码地址:https://github.com/onegeng/Html-App
本文内容多有不全,后续将会继续补充添加,进一步完善

欢迎大家的意见和指导.如果有什么问题请留言或者给我发邮件onegeng@aliyun.com

本文主要参考文章.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容