iframe有一个烦人的问题，就是在没有设置高度的情况下，被嵌套区会显示一大片空白，有时候设置了高度也不行，后来用JavaScript轻松解决了iframe自适应高度的问题，下面把经验和具体方法分享出来。
为了演示方便，这里需要2个页面，一个是被iframe的页，一个是母页面，先来看母页面，也就是有iframe代码的页面：
被iframe的页面：假设文件名是：iframe.htm，这个文件里的代码为：
代码如下
<script type="text/javascript">
function iframeAutoFit()
{
var ex;
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i {
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>
iframe自适应加载网页的高度(多浏览器兼容，支持XHTML)
最后补充一个:iframe的高度/宽度,自适应内容。
代码如下注意在iframe.htm页面中，要使用JS做些设置，这是比较关键的，若看不懂不要紧，你可直接把代码复制到你被iframe的页面中即可。
javascript学习指南|javascript控制iframe自适应高度例子
http://m.bbyears.com/wangyezhizuo/56292.html
推荐访问: