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。根據自己的具體需求去改吧。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,288評論 25 708
  • UIWebView加載本地HTML5文件一.準備HTML文件及其資源文件使用UIWebView加載本地的HTML文...
    wzf_taker閱讀 1,181評論 0 3
  • iOS開發系列--網絡開發 概覽 大部分應用程序都或多或少會牽扯到網絡開發,例如說新浪微博、微信等,這些應用本身可...
    lichengjin閱讀 3,721評論 2 7
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,923評論 18 139
  • 明明是在大逃亡啊!你怎么還能寫出如此的調皮話啊!看這本書總忍不住想對伊坂大喊,之后才會意識到,自己到底在做些什么啊...
    胡桃夾子怪閱讀 1,335評論 0 0