iOS之在webView中引入本地html,image,js,css文件的方法

项目需求
最近开发的项目,需要一个webView,同时这个webView会需要引入一些项目中的资源image,js,css

在webView中引入本地的html文件
这里最主要的一个webView的方法是:loadHTMLString:baseURL: 把HTML文件的内容以字符串的形式加载到webView里面,然后解析

加载webview的代码如下
   // get the model which is a html file for the webView
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
// load the html file to webView
[_webView loadHTMLString:htmlCont baseURL:nil];

通过上述方法,很方便的就能把一个HTML文件加载到webView中,很简单吧,接下来,来点进阶功能!

在webView中引入本地的image文件

这个功能的实现是承接上面那个方法的进一步扩展,最关键的是那个baseURL。先看实现代码:

// get the model which is a html file for the webView
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];  
  // 获取当前应用的根目录
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];    
// 通过baseURL的方式加载的HTML
// 可以在HTML内通过相对目录的方式加载js,css,img等文件
[_webView loadHTMLString:htmlCont baseURL:baseURL];

要注意的是:所有在应用内的资源文件都是在baseURL的根目录也就是此代码中的bundlePath的根目录,所以图片资源,不管在项目里面放在哪个目录结构下,在HTML内引用的时候,都是直接根目录的。
加载css和image 的时候baseURL不能为nill

这里我简单说一下
baseURL到底是什么东西?对此,我也很好奇,所以我NSLog了代码里面的baseURL,然后得到的结果是:file:///Users/(用户名)/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/(一些大写字母加连字符加数字的序列号)/(应用名).app/ 。然后我在终端里面找到这个目录,打开一看,发现都是一些HTML,image,txt等静态资源。

至此,在webView中插入本地image资源的功能已经实现了,下面是更有挑战性的功能:添加js文件

添加本地js文件到webView中

添加js文件

这个实现说起来其实很简单,因为不需要任何代码层面上的修改,只需要按上面添加image的方式,在script的src里面直接写js的文件名即可。

但是如果直接这样写,你就会发现js资源根本没有被加载。到底image和js有什么区别?看上面的图片,可以看到默认在bundlePath里面是没有我引入到工程里面的jquery.js和scrollLoading.js的。那么,这个是不是导致js资源没有被正确加载的原因?
在这篇文章:How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class和这篇文章iPhone基于lightbox的图片放大特效和网页布局中,都提及到一个

Select .js file and in the “Detail” view unselect the bullseye column indicating it is compiled code

In the “Groups & files” view expand the “Targets” tree and expand the application then go to “Copy Bundle Resources” and drag the *.js files into it.

方法是有了,可是这种英文的描述,还没有附加图片,实在是让人看不懂,大致知道的就是:js文件在xcode里面,默认是一种需要被编译的文件,这就导致它不会被放到我们刚刚放到的BundlePath(更专业的名称应该是Bundle Resources)里。

所以要解决的问题是,怎样才能使得js文件不被编译并且放到Bundle Resources中。

期间为了理解上面那两句英文而Google的经历就不说了,直接说结果吧。

在xcode里面,每个project都有至少一个Targets(多个的也有,但是我不懂),在Targets里面(打开Targets的方式是在左侧栏,点击project,在中间的内容区,就会出现project喝Targets),存放了一些资源文件,在Build Phases下可以看到,跟本次内容关联最大的有两项:Compile Sources和Copy Bundle Resources。在没修改的情况下,展开Compile Sources就能看到找了很久的jquery.js和scrollLoading.js

e2804a7f745cc38bf3b4e5e1eae08845.png
fcba8fcb77ff990394dfcd106a530e3b.png

Compile Sources后能看到两个js文件
接下来要做的很简单,从Compile Sources中删除两个js文件,再在Copy Bundle Resources中添加这两个文件,一切搞定。想来(偷懒,不想Google继续深入了解了),Compile Sources是放置那些需要被编译的文件,.h,.m和冤枉的.js文件等等,而Copy Bundle Resources里面放的是一些资源文件,在程序在运行时会引入的,同时在项目打包之后也依旧存在的文件。

其他格式的资源文件,在添加的时候也大致就是这个流程,不重复说了。
参考链接 http://www.th7.cn/web/html-css/201412/70846.shtml

2.iOS中用UIWebView的loadHTMLString后图片和文字失调解决方法

iOS中用UIWebView的loadHTMLString后图片和文字失调,图片过大,超过屏幕,文字太小;或者图片太小,文字太大,总之就是不协调。我们的需求是让图片的大小跟着屏幕的变化而变化,就是动态的去适应屏幕;那么文字的字体就是我们自己可以控制,可大可小。要想达到这样的效果,我们要在用loadHTMLString加载字符串之前对它进行处理。怎么处理呢?什么原理呢?

NSString *htmls = [NSString stringWithFormat:@"<html> \n"
                           "<head> \n"
                           "<style type=\"text/css\"> \n"
                           "body {font-size:15px;}\n"
                           "</style> \n"
                           "</head> \n"
                           "<body>"
                           "<script type='text/javascript'>"
                           "window.onload = function(){\n"
                           "var $img = document.getElementsByTagName('img');\n"
                           "for(var p in  $img){\n"
                              " $img[p].style.width = '100%%';\n"
                               "$img[p].style.height ='auto'\n"
                           "}\n"
                           "}"
                           "</script>%@"
                           "</body>"
                           "</html>",htmlString];

原理就是用一个for循环,拿到所有的图片,对每个图片都处理一次,让图片的宽为100%,就是按照屏幕宽度自适应;让图片的高atuo,自动适应。文字的字体大小,可以去改font-size:15px,这里我用的是15px。根据自己的具体需求去改吧。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • UIWebView加载本地HTML5文件一.准备HTML文件及其资源文件使用UIWebView加载本地的HTML文...
    wzf_taker阅读 1,146评论 0 3
  • iOS开发系列--网络开发 概览 大部分应用程序都或多或少会牵扯到网络开发,例如说新浪微博、微信等,这些应用本身可...
    lichengjin阅读 3,637评论 2 7
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 明明是在大逃亡啊!你怎么还能写出如此的调皮话啊!看这本书总忍不住想对伊坂大喊,之后才会意识到,自己到底在做些什么啊...
    胡桃夹子怪阅读 1,304评论 0 0