快捷導(dǎo)航

詳解iOS 加載本地HTML，css，js

更新時(shí)間：2017年04月18日 09:12:02 作者：青樓

本篇文章主要介紹了詳解iOS 加載本地HTML，css，js，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在IOS開發(fā)中，可以通過webView來加載HTML文件

步驟如下：

1.需要有一個(gè)webView，可以通過storyboard拖拽一個(gè) 或者 alloc 一個(gè)（我在這里是拖拽了一個(gè)），是否要給webView設(shè)置delegate ，根據(jù)自己的需要決定（如果只是展示頁(yè)面可以忽略）。

2.創(chuàng)建HTML文件、CSS文件、js文件，同樣的創(chuàng)建方式，只是后綴名不同。

New File -> Other ->Empty

創(chuàng)建HTML文件后綴名為：html，創(chuàng)建css文件后綴名為css，創(chuàng)建js文件后綴名為：js

這是創(chuàng)建完成后的樣子

3.在HTML文件，css文件，js文件中寫入我們的代碼。

在HTML文件中寫入一些元素

<!DOCTYPE html>
<html>
<head lang="zh">

  <meta charset="UTF-8">

  <title>第一個(gè)HTML</title>

  <link rel="stylesheet" type="text/css" href="index1.css" rel="external nofollow" >

  <script type="text/javascript" src="index1.js"></script>
</head>
<body>

  <h1>我是HTML</h1>

  <p id = "p">p標(biāo)簽</p>

  <img id = "img" src = "image.png" alt = "百度LOGO"><br/>

  <a id = "a" href="[http://baidu.com]()" rel="external nofollow" >我要到百度</a>

  <br/><br/><br/>

  <button onclick = "hello()">點(diǎn)擊我彈出hello</button>
</body>

</html>

在css文件中改變?cè)氐膶傩?/p>

#p{
  color:red;
}
#img{
  width:120px;
  height:50px;
}
#a{
  color:yellow;
}

在js文件中寫一個(gè)彈窗的函數(shù)

function hello(){
  alert("hello");
}

這樣我們的這三個(gè)文件就都寫好了，可以通過webView來加載了。

4.通過webView來加載這三個(gè)文件

在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運(yùn)行就能看見效果了?。ㄎ疫@里是有navgationcontroller的，如果你們沒加的話就沒有導(dǎo)航欄）

這樣html文件加載出來了，頁(yè)面元素的樣式也是通過css文件定義過的，接著我們點(diǎn)擊頁(yè)面中的點(diǎn)擊我彈出hello按鈕，就可以彈出一個(gè)hello的彈出框，如圖：

現(xiàn)在我們的html，css，js三個(gè)文件就都驗(yàn)證通過了~

5.捕捉html的交互

如果我們?cè)趆tml頁(yè)面中有交互，可以通過webView的delegate獲取到操作的鏈接(在第一步?jīng)]有設(shè)置webView的delegate的，現(xiàn)在需要設(shè)置了~)

遵守UIWebViewDelegate協(xié)議

在ViewController中實(shí)現(xiàn)UIWebViewDelegate中的這個(gè)方法

復(fù)制代碼代碼如下:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

看實(shí)現(xiàn)代碼：

- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
 navigationType:(UIWebViewNavigationType)navigationType{
  NSURL* url = [request URL];
  NSString* urlstring = [NSString stringWithFormat:@"%@",url];
  NSLog(@"url = >%@",url);
  return YES;
}

好，運(yùn)行一下，點(diǎn)擊頁(yè)面中的我要到百度這個(gè)超鏈接，看看是不是把鏈接輸出來啦