項(xiàng)目需求
最近開發(fā)的項(xiàng)目，需要一個(gè)webView俄占，同時(shí)這個(gè)webView會需要引入一些項(xiàng)目中的資源image,js,css
在webView中引入本地的html文件
這里最主要的一個(gè)webView的方法是：loadHTMLString:baseURL: 把HTML文件的內(nèi)容以字符串的形式加載到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];
通過上述方法矾飞，很方便的就能把一個(gè)HTML文件加載到webView中筒饰，很簡單吧围俘，接下來悍引，來點(diǎn)進(jìn)階功能恩脂！
在webView中引入本地的image文件
這個(gè)功能的實(shí)現(xiàn)是承接上面那個(gè)方法的進(jìn)一步擴(kuò)展，最關(guān)鍵的是那個(gè)baseURL趣斤。先看實(shí)現(xiàn)代碼：
// 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];
// 獲取當(dāng)前應(yīng)用的根目錄
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
// 通過baseURL的方式加載的HTML
// 可以在HTML內(nèi)通過相對目錄的方式加載js,css,img等文件
[_webView loadHTMLString:htmlCont baseURL:baseURL];
要注意的是：所有在應(yīng)用內(nèi)的資源文件都是在baseURL的根目錄也就是此代碼中的bundlePath的根目錄俩块，所以圖片資源，不管在項(xiàng)目里面放在哪個(gè)目錄結(jié)構(gòu)下浓领，在HTML內(nèi)引用的時(shí)候玉凯，都是直接根目錄的。
加載css和image 的時(shí)候baseURL不能為nill
這里我簡單說一下
baseURL到底是什么東西联贩？對此漫仆，我也很好奇，所以我NSLog了代碼里面的baseURL泪幌，然后得到的結(jié)果是：file:///Users/(用戶名)/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/(一些大寫字母加連字符加數(shù)字的序列號)/(應(yīng)用名).app/ 盲厌。然后我在終端里面找到這個(gè)目錄署照，打開一看，發(fā)現(xiàn)都是一些HTML吗浩，image建芙，txt等靜態(tài)資源。
至此懂扼，在webView中插入本地image資源的功能已經(jīng)實(shí)現(xiàn)了禁荸，下面是更有挑戰(zhàn)性的功能：添加js文件
添加本地js文件到webView中
添加js文件
這個(gè)實(shí)現(xiàn)說起來其實(shí)很簡單，因?yàn)椴恍枰魏未a層面上的修改阀湿，只需要按上面添加image的方式赶熟，在script的src里面直接寫js的文件名即可。
但是如果直接這樣寫陷嘴，你就會發(fā)現(xiàn)js資源根本沒有被加載映砖。到底image和js有什么區(qū)別？看上面的圖片灾挨，可以看到默認(rèn)在bundlePath里面是沒有我引入到工程里面的jquery.js和scrollLoading.js的啊央。那么，這個(gè)是不是導(dǎo)致js資源沒有被正確加載的原因涨醋？
在這篇文章：How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class和這篇文章iPhone基于lightbox的圖片放大特效和網(wǎng)頁布局中，都提及到一個(gè)
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.
方法是有了逝撬，可是這種英文的描述浴骂，還沒有附加圖片，實(shí)在是讓人看不懂宪潮，大致知道的就是：js文件在xcode里面溯警，默認(rèn)是一種需要被編譯的文件，這就導(dǎo)致它不會被放到我們剛剛放到的BundlePath(更專業(yè)的名稱應(yīng)該是Bundle Resources)里狡相。
所以要解決的問題是梯轻，怎樣才能使得js文件不被編譯并且放到Bundle Resources中。
期間為了理解上面那兩句英文而Google的經(jīng)歷就不說了尽棕，直接說結(jié)果吧喳挑。
在xcode里面，每個(gè)project都有至少一個(gè)Targets(多個(gè)的也有滔悉，但是我不懂)伊诵，在Targets里面(打開Targets的方式是在左側(cè)欄，點(diǎn)擊project回官，在中間的內(nèi)容區(qū)曹宴，就會出現(xiàn)project喝Targets)，存放了一些資源文件歉提，在Build Phases下可以看到笛坦，跟本次內(nèi)容關(guān)聯(lián)最大的有兩項(xiàng)：Compile Sources和Copy Bundle Resources区转。在沒修改的情況下，展開Compile Sources就能看到找了很久的jquery.js和scrollLoading.js
Compile Sources后能看到兩個(gè)js文件
接下來要做的很簡單版扩，從Compile Sources中刪除兩個(gè)js文件废离，再在Copy Bundle Resources中添加這兩個(gè)文件，一切搞定资厉。想來(偷懶厅缺，不想Google繼續(xù)深入了解了)，Compile Sources是放置那些需要被編譯的文件宴偿，.h,.m和冤枉的.js文件等等湘捎，而Copy Bundle Resources里面放的是一些資源文件，在程序在運(yùn)行時(shí)會引入的窄刘，同時(shí)在項(xiàng)目打包之后也依舊存在的文件窥妇。
其他格式的資源文件，在添加的時(shí)候也大致就是這個(gè)流程娩践，不重復(fù)說了活翩。
參考鏈接 http://www.th7.cn/web/html-css/201412/70846.shtml
2.iOS中用UIWebView的loadHTMLString后圖片和文字失調(diào)解決方法
iOS中用UIWebView的loadHTMLString后圖片和文字失調(diào)，圖片過大翻伺，超過屏幕材泄，文字太小吨岭；或者圖片太小拉宗，文字太大，總之就是不協(xié)調(diào)辣辫。我們的需求是讓圖片的大小跟著屏幕的變化而變化旦事，就是動(dòng)態(tài)的去適應(yīng)屏幕；那么文字的字體就是我們自己可以控制急灭，可大可小姐浮。要想達(dá)到這樣的效果，我們要在用loadHTMLString加載字符串之前對它進(jìn)行處理葬馋。怎么處理呢卖鲤？什么原理呢？
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];
原理就是用一個(gè)for循環(huán)点楼，拿到所有的圖片扫尖，對每個(gè)圖片都處理一次，讓圖片的寬為100%掠廓，就是按照屏幕寬度自適應(yīng)换怖；讓圖片的高atuo，自動(dòng)適應(yīng)蟀瞧。文字的字體大小沉颂，可以去改font-size:15px条摸，這里我用的是15px。根據(jù)自己的具體需求去改吧铸屉。
