iOS 載入本地HTML,css,js

來源:互聯網
上載者:User

標籤: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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.