IOS中的webView載入HTML_IOS

　在日常開發中，我們為了效率會用到很多很多的WebView,比如在做某個明細頁面的時候我們返回給你的可能是一個html字串，我們就需要將當前字串展示到webView上面，所以我們對HTML標籤需要有一定的認識，下面我們來一起用html標籤和JS寫一個打地鼠遊戲,這裡我們主要講解HTML標籤的書寫，只要如何和webView適配涉及到響應式布局我們下次講解：

1、首先我們先建立一個html檔案

2 完整html標籤並且設定編碼格式為UTF-8

3 在body裡面增加十隻老鼠圖片，並且增加點擊事件，當點擊老鼠後觸發JS函數onclick="addScore(this);"，代碼如下：

<img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:100px;top:200px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:200px;top:280px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:150px;top:100px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:300px;top:120px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:400px;top:200px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:600px;top:250px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:670px;top:100px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:490px;top:60px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:590px;top:30px;display:none' onclick="addScore(this);"/><img src='http://pic1.nipic.com/2008-10-16/200810169229387_2.jpg' style='width:80px;height:80px;position:absolute;left:650px;top:300px;display:none' onclick="addScore(this);"/> 

4 先將所有的老鼠圖片放入數組中，然後開啟定時器，每秒調用兩次該方法，並且隨機顯示八個老鼠圖片

//展示老鼠function showMouse(){//隱藏所有的老鼠hideAll();//控制點擊次數times++;//超過20此結束點擊if(times>20){window.clearInterval(timer);alert("遊戲結束，得分"+score+"分");return;}//擷取所有的老鼠var imgs=document.getElementsByTagName("img");//隨機的顯示八隻老鼠for(var i=0;i<8;i++){var tem=Math.random()*10;tem= Math.round(tem);var node=imgs[tem]node.style.display="";}}//隱藏所有老鼠function hideAll(){var imgs=document.getElementsByTagName("img");for(var i=0 ;i<imgs.length;i++){var tem=imgs[i];tem.style.display="none";}}

5 每次點擊我們需要隱藏當前的圖片，並且增加分數，每點擊一次老鼠增加一分

//增加分數function addScore(cell){cell.style.display="none";score++;document.getElementById("label").innerHTML=score+"分數";} 

6 html載入到webView中顯示

UIWebView * web=[[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 375, 667)];NSString * path=[[NSBundle mainBundle] pathForResource:@"mouse.html" ofType:nil];NSData * data=[NSData dataWithContentsOfFile:path];NSString * str=[[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];web.scalesPageToFit=YES;[web loadHTMLString:str baseURL:nil];[self.view addSubview:web];

以上所述是小編給大家介紹的IOS中的webView載入HTML的相關知識，希望對大家有所協助。