天天看點

xcode,在webView中引入本地html,image,js,css檔案的方法(ios自學筆記)

項目需求

最近開發的項目,需要一個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 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檔案

這個功能的實作,很大程度上是借鑒了這篇文章:UIWebView – Loading External Images and CSS。大家可以去看看這篇文章,或者看我下面的繼續描述。

這個功能的實作是承接上面那個方法的進一步擴充,最關鍵的是那個

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];

      

在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等靜态資源。
xcode,在webView中引入本地html,image,js,css檔案的方法(ios自學筆記)

至此,在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的界面)

xcode,在webView中引入本地html,image,js,css檔案的方法(ios自學筆記)

展開Compile Sources後能看到兩個js檔案

xcode,在webView中引入本地html,image,js,css檔案的方法(ios自學筆記)

接下來要做的很簡單,從

Compile Sources

中删除兩個js檔案,再在

Copy Bundle Resources中

添加這兩個檔案,一切搞定。

想來(偷懶,不想Google繼續深入了解了),

Compile Sources

是放置那些需要被編譯的檔案,.h,.m和冤枉的.js檔案等等,而

Copy Bundle Resources

裡面放的是一些資源檔案,在程式在運作時會引入的,同時在項目打包之後也依舊存在的檔案。

其他格式的資源檔案,在添加的時候也大緻就是這個流程,不重複說了。

繼續閱讀