標籤:code f11 script 分享 targe 改變 doc tle undle
在IOS開發中,可以通過webView來載入HTML檔案
步驟如下:
1.需要有一個webView,可以通過storyboard拖拽一個 或者 alloc 一個(我在這裡是拖拽了一個),是否要給webView設定delegate ,根據自己的需要決定(如果只是展示頁面可以忽略)。
webView
2.建立HTML檔案、CSS檔案、js檔案,同樣的建立方式,只是尾碼名不同。
New File -> Other ->Empty
建立HTML檔案尾碼名為:html,建立css檔案尾碼名為css,建立js檔案尾碼名為:js
建立HTML檔案、CSS檔案、js檔案
這是建立完成後的樣子
建立完成
3.在HTML檔案,css檔案,js檔案中寫入我們的代碼。
在HTML檔案中寫入一些元素
<!DOCTYPE html><html><head lang="zh"> <meta charset="UTF-8"> <title>第一個HTML</title> <link rel="stylesheet" type="text/css" href="index1.css"> <script type="text/javascript" src="index1.js"></script></head><body> <h1>我是HTML</h1> <p id = "p">p標籤</p> <img id = "img" src = "image.png" alt = "百度LOGO"><br/> <a id = "a" href="[http://baidu.com]()">我要到百度</a> <br/><br/><br/> <button onclick = "hello()">點擊我彈出hello</button></body></html>
在css檔案中改變元素的屬性
#p{ color:red;}#img{ width:120px; height:50px;}#a{ color:yellow;}
在js檔案中寫一個彈窗的函數
function hello(){ alert("hello");}
這樣我們的這三個檔案就都寫好了,可以通過webView來載入了 。
4.通過webView來載入這三個檔案
在viewController的viewDidLoad方法中寫入一下代碼
NSString *path = [[NSBundle mainBundle] bundlePath];NSURL *baseURL = [NSURL fileURLWithPath:path];NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index1" ofType:@"html"];NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];[self.webView loadHTMLString:htmlCont baseURL:baseURL];
寫完後command+R運行就能看見效果了!(我這裡是有navgationcontroller的,如果你們沒加的話就沒有導覽列)
這樣html檔案載入出來了,頁面元素的樣式也是通過css檔案定義過的,接著我們點擊頁面中的
點擊我彈出hello按鈕,就可以彈出一個hello的彈出框,
彈出hello的彈出框
現在我們的html,css,js三個檔案就都驗證通過了~
5.捕捉html的互動
如果我們在html頁面中有互動,可以通過webView的delegate擷取到操作的連結(在第一步沒有設定webView的delegate的,現在需要設定了~)
遵守UIWebViewDelegate協議
在ViewController中實現UIWebViewDelegate中的這個方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
看實現代碼:
- (BOOL)webView:(UIWebView )webView
shouldStartLoadWithRequest:(NSURLRequest )request
navigationType:(UIWebViewNavigationType)navigationType{
NSURL url = [request URL];
NSString urlstring = [NSString stringWithFormat:@"%@",url];
NSLog(@"url = >%@",url);
return YES;
}
好,運行一下,點擊頁面中的我要到百度這個超連結,看看是不是把連結輸出來啦
輸出連結地址
這樣就可以根據自己的需要做一些操作了。。。。。。。
附上源碼地址:https://github.com/xingxianqing/loadHtmlCssJsDemo
累了吧、娛樂一下......
神題一道
青樓
連結:http://www.jianshu.com/p/c375ac056149
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
iOS 載入本地HTML,css,js