使用 UIWebView 製作網頁離線瀏覽的方法

 

製作離線瀏覽，這裡指的是將網頁的 html 或是 js 檔等包裝在應用程式中直接執行，就如同在電腦上的本機端直接執行網頁一般。在下面的範例中我們將在 index.html 網頁裡使用超連結至相對應的網頁，並在相對應的分頁頁面中使用 javaScript 語言的 js 檔實做這些效果，請看以下程式碼。

由於本站著重於 iOS 的學習示範，故不考慮 HTML 語法撰寫的問題，假設我們已經被妥所需的相關檔案並將檔案拖曳至專案的 Supporting Files（Xcode 3 的位置在 Resources），接著就是使用 UIWebView 來讀取這些檔案，本範例中的 UIWebView 是直接從 Interface Builder 中拉出來使用，若是想要使用程式碼來產生可以參考UIWebView 的基本使用方法一文。

//取得檔案路徑
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:path];
NSURLRequest *requestobj = [NSURLRequest requestWithURL:url];

//將檔案載入UIWebView中
[theWebView loadRequest:requestobj];

上述程式碼，只將 index.html 載入 UIWebView 中做顯示，後續的其他頁面就如同瀏覽網頁的形式，會自動將其載入並不需要做特殊設定。

程式碼到這裡其實已經完成網頁在本機端的讀取，也就是離線瀏覽的動作，但是如果您網頁有圖片檔或是其他外掛稱程式檔，所放置連結的位置是在其他資料夾中，就有可能會發生找不到檔案的情形，其原因是程式將網頁包裝至 Target 中執行時並不會存在任何資料的階層關係，所以在使用這些檔案時也必須將其連結位置移除，網頁才能找到順利找到該檔案。

另一個比較特殊的例子就是外掛程式檔，像是 js 這類的檔案，必須以手動的方式加入 Bundle Resources 中，加入的方法是選取 Target 的 Build Phases 分頁（Xcode 3 可直接在專案下將 Target 做展開），找到 Copy Build Phases 項目並將對應的 js 檔案加入，如下圖。

ps : 我們可以移除在 Target 的 Build Phases 分頁中 Compile Sources 內的 js 檔，這算是 Xcode 的小 Bug，因為其實並不需要 Compile 這個 js 檔，因為它可以直接被 HTML 語法所讀取。另一方面注意到上圖 .gif 圖檔的地方並有被任何資料夾所包覆，但是後面灰色實體路徑部份卻是放在名為 gif 的資料夾下，這也證實上述所說 Target 中並不會存在任何資料的階層關係。