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

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

 

2014-12-08 20:00:16CSDN-sky_2016-點擊數:10292

 

 

項目需求

最近開發的項目，須要一個webView，同時這個webView會須要引入一些項目中的資源：

• 一個本地的html文件，做爲webView的模板
• 兩張loading圖片，在圖片未加載的時候進行佔位
• jquery.js,scrollLoading.js 也是本地的，實現滾動加載圖片功能

而後就開始了漫長的Google歷程。

在webView中引入本地的html文件

這裏最主要的一個webView的方法是：loadHTMLString:baseURL: 把HTML文件的內容以字符串的形式加載到webView裏面，而後解析。

 

 

// get the model which is a html file for the webViewNSString * 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文件

這個功能的實現，很大程度上是借鑑了這篇文章：UIWebView – Loading External Images and CSS。你們能夠去看看這篇文章，或者看我下面的繼續描述。

這個功能的實現是承接上面那個方法的進一步擴展，最關鍵的是那個baseURL。先看實現代碼：

// get the model which is a html file for the webViewNSString * 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];

在object-c裏面經過如上面的方式加載HTML文件，指定了baseURL的值爲程序的bundlePath，而後在HTML文件裏面就能夠自由的經過直接書寫標籤的方式加載圖片圖片文件了

 

<img src="loading.png" />;

 

要注意的是：全部在應用內的資源文件都是在baseURL的根目錄也就是此代碼中的bundlePath的根目錄，因此圖片資源，無論在項目裏面放在哪一個目錄結構下，在HTML內引用的時候，都是直接根目錄的。

baseURL究竟是什麼東西？對此，我也很好奇，因此我NSLog了代碼裏面的baseURL，而後獲得的結果是：file:///Users/(用戶名)/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/(一些大寫字母加連字符加數字的序列號)/(應用名).app/ 。而後我在終端裏面找到這個目錄，打開一看，發現都是一些HTML，image，txt等靜態資源。

bundlePath和其中的內容展現

至此，在webView中插入本地image資源的功能已經實現了，下面是更有挑戰性的功能：添加js文件

添加本地js文件到webView中

這個實現提及來其實很簡單，由於不須要任何代碼層面上的修改，只須要按上面添加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

打開Targets(基於xcode5的界面) 展開Compile Sources後能看到兩個js文件

接下來要作的很簡單，從Compile Sources中刪除兩個js文件，再在Copy Bundle Resources中添加這兩個文件，一切搞定。想來(偷懶，不想Google繼續深刻了解了)，Compile Sources是放置那些須要被編譯的文件，.h,.m和冤枉的.js文件等等，而Copy Bundle Resources裏面放的是一些資源文件，在程序在運行時會引入的，同時在項目打包以後也依舊存在的文件。

其餘格式的資源文件，在添加的時候也大體就是這個流程，不重複說了。