A-A+

js tab切换时iframe自适应问题

2015年07月07日 JavaScript 暂无评论 阅读 160 次

因为js的tab切换,所以加载时,iframe的样式为 display:none,所以在tab切换之前,已经加载完成.所以会有一定的问题.

如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码 会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显 示后才能正确获得这些值。

都有哪些方式来获取,这个值.

html代码

<div id="page_list">
<ul>
<li id="tab1"><a  href="javascript:;" class="now" onclick="switchTab('tab1','con1');this.blur();return false;"> 项目主页</a></li>
<li id="tab2"><a href="javascript:;" onclick="switchTab('tab2','con2');this.blur();return false;">支持者</a></li>
</ul>
</div>
<div id="menu_con">
<div id="con1" >
{$content}
</div>
<div id="con2" style="display:none">
<iframe id="ifr"  frameborder="0" width="100%" scrolling="no" ></iframe>
</div>
</div>

js代码:

    <script type="text/javascript">
function switchTab(ProTag, ProBox) {
for (i = 1; i < 5; i++) {
if ("tab" + i == ProTag) {
document.getElementById(ProTag).getElementsByTagName("a")[0].className = "now";
} else {
document.getElementById("tab" + i).getElementsByTagName("a")[0].className = "";
}
if ("con" + i == ProBox) {
if(i==2){
$("#ifr").attr("src","http://172.16.2.253:9111/sup.html");
}
document.getElementById(ProBox).style.display = "";
} else {
document.getElementById("con" + i).style.display = "none";
}
}
}
</script>

<script type="text/javascript">
var ifr = document.getElementById('ifr')
ifr.onload = function() {
var Iheight = $("#ifr").contents().find("#sup_table").height();
$("#ifr").attr("height",Iheight+30);
}
</script>

display:none;到 显示 iframe 或者其他元素会重新加载吗?

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录