main.htm:
<
html
>
<
head
>
<
meta
http-equiv
='Content-Type'
content
='text/html;
charset
=gb2312'
/>
<
meta
name
='author'
content
='F.R.Huang(meizz梅花雪)//www.meizz.com'
/>
<
title
>
iframe自适应加载的页面高度
</
title
>
</
head
>
<
body
>
<
div
><
iframe
src
="child.htm"
></
iframe
></
div
>
</
body
>
</
html
>
child.htm:
<
html
>
<
head
>
<
meta
http-equiv
='Content-Type'
content
='text/html;
charset
=gb2312'
/>
<
meta
name
='author'
content
='F.R.Huang(meizz梅花雪)//www.meizz.com'
/>
<
title
>
iframe 自适应其加载的网页(多浏览器兼容)
</
title
>
<
script
type
="text/javascript"
>
<!--
function iframeAutoFit()
{
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, d=document, dd=d.documentElement;
a[i].parentNode.style.height = a[i].offsetHeight +"px";
a[i].style.height = "10px";
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
if(dd && dd.scrollHeight) h1=dd.scrollHeight;
if(d.body) h2=d.body.scrollHeight;
var h=Math.max(h1, h2);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = a[i].parentNode.style.height = h +"px";
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
//window.attachEvent("onresize", iframeAutoFit);
}
else if(window.addEventListener)
{
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 自适应其加载的网页(多浏览器兼容:IE5.5+、Mozilla、Firefox、Opera、Netscape7.2+、Safari3等,支持XHTML)
</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
很多人反应在IE7里使用它会死机,那是因为在自适应高度时触发了 window.onresize 事件,而这个事件又去调用这个调整 <iframe> 高度的函数,产生了死循环调用。
这段代码里我对 iframe 所在的父元素也设定了一个高度,以防止iframe 高度变化时页面跳动的太厉害,在调用的时候可酌情使用这个设置。