Iframe页面内容变更页面自动改变大小(非加载时自适应大小)
直接上代码.
父页面Praent.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Parent</title>
<script language="javascript">
function resizeIframe(obj,objId){
var docHeight = document.frames[objId].document.body.scrollHeight ;
var docWidth = document.frames[objId].document.body.scrollWidth;
obj.style.height = docHeight + 'px';
obj.style.width = docWidth + 'px';
}
</script>
</head>
<body style="margin: 0;">
<table border="0" cellpadding="0" cellspacing="0" class="Table-BG-Line" height="100%">
<tr valign="top">
<td width="650px"><iframe name="Content" id="Content" scrolling="no" frameborder="0" width="650"
onload="this.height=Content.document.body.scrollHeight;this.width=Content.document.body.scrollWidth;"
src="Child.htm"></iframe></td>
</tr>
</table>
</body>
</html>
子页面Child.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Child</title>
<script language="javascript">
function LoadPickingAdd()
{
var objMethod = document.getElementById("ddlMethod");
var objAddress = document.getElementById("trAddress");
if (objMethod == null)
{
objAddress.style.display = "inline";
}
else
{
if (objMethod.selectedIndex == 0)
{
objAddress.style.display = "none";
}
else
{
objAddress.style.display = "inline";
}
}
}
function GetAddr()
{
var objMethod = document.getElementById("ddlMethod");
var objAddress = document.getElementById("trAddress");
if (objMethod.selectedIndex == 0)
{
objAddress.style.display = "none";
}
else
{
objAddress.style.display = "inline";
//以下代码实现自动调整子页面高度.
if(top.location != self.location)
{
var a = window.parent.document.getElementsByName(self.name);
a[0].height = document.body.scrollHeight;
}
}
}
</script>
</head>
<body onload="LoadPickingAdd()" style=" margin:0">
<form id="form1" method="post" action="">
<p>
<select name="ddlMethod" id="ddlMethod" onchange="GetAddr()">
<option value="0">0</option>
<option value="1">1</option>
</select>
</p>
<p> </p>
<table width="200" border="1" height="100%">
<tr id="trAddress" style="display:inline">
<td>a</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td> </td>
</tr>
<tr>
<td>c</td>
<td> </td>
</tr>
<tr>
<td>d</td>
<td> </td>
</tr>
<tr>
<td>e</td>
<td> </td>
</tr>
<tr>
<td>f</td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
父页面Praent.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Parent</title><script language="javascript">
function resizeIframe(obj,objId){ 
var docHeight = document.frames[objId].document.body.scrollHeight ; var docWidth = document.frames[objId].document.body.scrollWidth; obj.style.height = docHeight + 'px'; obj.style.width = docWidth + 'px'; } </script></head><body style="margin: 0;"><table border="0" cellpadding="0" cellspacing="0" class="Table-BG-Line" height="100%"> <tr valign="top"> <td width="650px"><iframe name="Content" id="Content" scrolling="no" frameborder="0" width="650" onload="this.height=Content.document.body.scrollHeight;this.width=Content.document.body.scrollWidth;"
src="Child.htm"></iframe></td>
</tr></table></body></html>子页面Child.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Child</title><script language="javascript">function LoadPickingAdd(){ var objMethod = document.getElementById("ddlMethod"); var objAddress = document.getElementById("trAddress"); if (objMethod == null) { objAddress.style.display = "inline"; } else { if (objMethod.selectedIndex == 0) { objAddress.style.display = "none"; } else { objAddress.style.display = "inline"; } }}function GetAddr(){ var objMethod = document.getElementById("ddlMethod"); var objAddress = document.getElementById("trAddress"); if (objMethod.selectedIndex == 0) { objAddress.style.display = "none"; } else { objAddress.style.display = "inline"; //以下代码实现自动调整子页面高度. if(top.location != self.location) { var a = window.parent.document.getElementsByName(self.name); a[0].height = document.body.scrollHeight; } }}</script></head><body onload="LoadPickingAdd()" style=" margin:0"><form id="form1" method="post" action=""><p> <select name="ddlMethod" id="ddlMethod" onchange="GetAddr()"> <option value="0">0</option> <option value="1">1</option> </select></p><p> </p><table width="200" border="1" height="100%"> <tr id="trAddress" style="display:inline"> <td>a</td> <td> </td> </tr> <tr> <td>b</td> <td> </td> </tr> <tr> <td>c</td> <td> </td> </tr> <tr> <td>d</td> <td> </td> </tr> <tr> <td>e</td> <td> </td> </tr> <tr> <td>f</td> <td> </td> </tr></table></form></body></html>