既然在 关于动态写入表格问题的扩展 中提到了iFrame,咱就不能不说说iFrame高度自适应问题...

前段时间,看了好多达人们写的关于iFrame高度自适应的解决方法,结合到项目开发中,也做了自己的研究,下面来写写我对iFrame高度自适应的解决方法。

iFrame页面New_Subnets_frame_check.php加入js代码:

父页面代码片段如下:

function Fream_Height_auto()
{
var pos1;
if (window.parent.document.getElementById( " pos1 " ))
{
// 获得父页面中,装在iFrame的层对象
pos1 = window.parent.document.getElementById( " pos1 " );
if (pos1.style.display == " none " ) // 如果获得对象,判断该对象的状态是否隐藏
{
var frm_height = window.parent.document.getElementById( " frm_height " ); // 获得父页面中记录高度的隐藏域的对象
window.parent.document.getElementById( " frame_check " ).height = frm_height.value; // 将该对象的值,赋给父页面中的iFrame的高度属性
}
else
{
var frm_height = window.parent.document.getElementById( " frm_height " );
window.parent.document.getElementById(
" frame_check " ).height = 120 ; // 初始化iFrame的高度
window.parent.document.getElementById( " frame_check " ).height = document.documentElement.scrollHeight; // 将iFrame的高度定义成文档元素的滚动高度
frm_height.value = document.documentElement.scrollHeight; // 并把文档元素的滚动高度,赋值给父页面中记录高度的隐藏域
}
}
}
window.onload
= function ()
{
Fream_Height_auto();
}

当然,js代码加上异常处理效果更好。。

< div id ="pos1" style ="display:none" >
< div class ="groupbody" >
< div class ="div_style" >
< table width ="95%" border ="0" cellspacing ="0" cellpadding ="0" >
< tr >< td height ="10" colspan ="2" align ="center" >< hr size ="1" noshade ="noshade" /></ td ></ tr >

< tr >
< td height ="30" colspan ="2" align ="center" >
< iframe frameborder ="0" width ="100%" scrolling ="no" name ="frame_check" id ="frame_check" src ="New_Subnets_frame_check.php" ></ iframe >
</ td >
</ tr >

< tr >
< td width ="20%" height ="25" align ="center" > &nbsp; </ td >
< td height ="25" align ="left" >
< input onclick ="change();" class ="input_button" type ="button" name ="Submit3" value ="<?phpecho$New_Subnets_la['Add']?>" />
< input name ="frm_height" type ="hidden" id ="frm_height" value ="120" />
</ td >
</ tr >

< tr >
< td height ="30" colspan ="2" align ="center" >
< table style ="border:1pxsolid#39739C;" width ="690" border ="0" cellpadding ="0" cellspacing ="0" bgcolor ="#FFFFFF" >
< tr >
< td width ="230" class ="tableleft" >
<? phpecho$New_Subnets_la['Option_Name'] ?> &nbsp;
</ td >
< td width ="230" class ="tablecenter" >
<? phpecho$New_Subnets_la['Value'] ?> &nbsp;
</ td >
< td width ="230" class ="tableright" >
<? phpecho$New_Subnets_la['Action'] ?> &nbsp;
</ td >
</ tr >
<!-- 循环开始 -->
< tr >
< td colspan ="3" align ="center" class ="tdleft" >
< table id ="myTable" >
</ table >
</ td >
</ tr >

<!-- 循环结束 -->
</ table >
< input name ="tablelistnum" type ="hidden" id ="tablelistnum" />
< textarea style ="display:none" name ="tablelist" cols ="40" rows ="5" id ="tablelist" ></ textarea >
</ td >
</ tr >
</ table >
</ div >
</ div >
</ div >

父页面主要加入一个记录iFrame高度的隐藏域<input name="frm_height" type="hidden" id="frm_height" value="120"/>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值