iframe有一个烦人的问题，就是在没有设置高度的情况下，被嵌套区会显示一大片空白，有时候设置了高度也不行，后来用JavaScript轻松解决了iframe自适应高度的问题，下面把经验和具体方法分享出来。
为了演示方便，这里需要2个页面，一个是被iframe的页，一个是母页面，先来看母页面，也就是有iframe代码的页面：
<html> <head> <title>iframe自适应加载的网页高度</title> </head> <body> <iframe src="iframe.htm"></iframe> </body> </html>
被iframe的页面：假设文件名是：iframe.htm，这个文件里的代码为：
<html>
<head>
<title>iframe自适应网页高度</title>
<script type="text/javascript">
function iframeAutoFit()
{
var ex;
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0;
if(document.documentElement&&document.documentElement.scrollHeight)
{
h1=document.documentElement.scrollHeight;
}
if(document.body) h2=document.body.scrollHeight;
var h=Math.max(h1, h2);
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = h +"px";
}
}
}
}
catch (ex){}
}
if(document.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
window.attachEvent("onresize", iframeAutoFit);
}
else
{
window.addEventListener('load', iframeAutoFit, false);
window.addEventListener('resize', iframeAutoFit, false);
}
</script>
</head>
<body>
<table border="1" width="200" style="height: 400px; background-color: yellow">
<tr>
<td>iframe自适应加载网页的高度(多浏览器兼容，支持XHTML)</td>
</tr>
</table>
</body>
</html>注意在iframe.htm页面中，要使用JS做些设置，这是比较关键的，若看不懂不要紧，你可直接把代码复制到你被iframe的页面中即可。
