IOS中的webView加载HTML_IOS

IOS中的webView加载HTML

2021-01-06 14:57杰瑞教育 IOS

在日常开发中，我们为了效率会用到很多很多的WebView,比如在做某个明细页面的时候我们返回给你的可能是一个html字符串，我们就需要将当前字符串展示到webView上面，所以我们对HTML标签需要有一定的认识，下面我们来一起用html标

　在日常开发中，我们为了效率会用到很多很多的webview,比如在做某个明细页面的时候我们返回给你的可能是一个html字符串，我们就需要将当前字符串展示到webview上面，所以我们对html标签需要有一定的认识，下面我们来一起用html标签和js写一个打地鼠游戏,这里我们主要讲解html标签的书写，只要如何和webview适配涉及到响应式布局我们下次讲解：

IOS中的webView加载HTML

1、首先我们先新建一个html文件

IOS中的webView加载HTML

2 完整html标签并且设置编码格式为utf-8

IOS中的webView加载HTML

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];