目的:Egret里使用iframe标签达到内嵌多个web界面,模式相当于主swf调用N个子swf的效果;
目前在做项目过程中,在使用iframe的时候,碰到了一些功能需求,以及解决方法如下:
一、.在index.html里添加iframe标签,
在index.html的<body>标签下,添加iframe标签,包括:路径,宽,高,坐标X,Y,是否出现滚动条,等属性;
想要详细了解其意思的话,请阅读 http://www.w3school.com.cn/tags/tag_iframe.asp
有两种方法:
1.
<style type="text/css"> .wrapper { width:1104px; height:570px; margin:100px 30px; overflow:hidden; position:relative; } .iframe { width:1024px;height:768px; position:absolute; top:10px; left:50px; } </style> <div class="wrapper"> <iframe class="iframe" src="http://www.baidu.com" scrolling="no" frameborder="0"> </iframe> </div>
2.
<iframe id="page1" width=1104 height=570 frameborder=0 scrolling=auto src="resource/assets/Html/Mobile/index.html?v=<?=$ver?>" style="position: absolute; top: 100px; left: 200px;"></iframe>
二、添加标签完成之后,如何让iframe内容跟随主html进行缩放,
方法:
在 style 属性方法里,添加
width:100%;height:100%;
这句代码,就可以达到让iframe内容跟随主html进行缩放的效果;完整的代码如下:
<iframe id="page1" width=1104 height=570 frameborder=0 scrolling=auto src="" style="width:50%;height:50%; position: absolute; top: 0px; left: 0px;"></iframe>
三、解决缩放问题后,如何控制iframe内容刷新,更换不同的链接呢?并且是在egret里进行控制
方法如下:
在 index.html里的<script>标签下,添加 函数,用来根据情况设定 iframe的src(可以考察:http://www.cnblogs.com/fanyf/p/3651523.html)
function setPage(bool) { if(bool == false) { var bgm = document.getElementById('page1'); var name = "resource/assets/Html/PC/index.html?v=<?=$ver?>"; bgm.src = name; }else { var bgm = document.getElementById('page1'); var name = "resource/assets/Html/Mobile/index.html?v=<?=$ver?>"; bgm.src = name; } }
然后在egret代码里对这个函数进行引用,其方法如下:
window["setPage"](true);
到这步,基本功能就完成了;
四、但是有时候想清除iframe的内容,让他为空,隐藏,该怎么做呢?
方法如下:
需要把iframe的src设为空,页面就不会显示了,不过设为空之后,会出现一个404提示,我目前解决方法是添加一句 bgm.visible = false;不过这方法在chrome里能执行,在ie里没有效果
var bgm = document.getElementById('page1'); var name = " "; bgm.src = name; bgm.visible = false;