前段时间,看了好多达人们写的关于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();
}
{
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" > </ 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'] ?>
</ td >
< td width ="230" class ="tablecenter" >
<? phpecho$New_Subnets_la['Value'] ?>
</ td >
< td width ="230" class ="tableright" >
<? phpecho$New_Subnets_la['Action'] ?>
</ 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 >
< 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" > </ 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'] ?>
</ td >
< td width ="230" class ="tablecenter" >
<? phpecho$New_Subnets_la['Value'] ?>
</ td >
< td width ="230" class ="tableright" >
<? phpecho$New_Subnets_la['Action'] ?>
</ 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"/>