<html>
<head>
<title>iframe自适应高度</title>
</head>
<body>
<div><iframe src="iframe自适应高度.htm"></iframe></div>
</body>
</html>
第二个页面会自动调整子页的大小，实现代码如下所示：
<html>
<head>
<title>iframe自适应网页</title>
<script type="text/javascript">
//自动调整iframe框架的方法
function iframeAuto()
{
try
{
if(window!=parent)
{
//定位需要调整的frame框架（在父级窗口中查找）
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++)
{
if(a[i].contentWindow==window)
{
var h1=0, h2=0;
a[i].parentNode.style.height = a[i].offsetHeight +"px";
a[i].style.height = "10px"; //首先设置高度为10px,后面会修改
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 = a[i].parentNode.style.height = h +"px";
} } }
}
catch (ex){}
}
//事件绑定的方法，支持IE5以上版本
if(window.attachEvent)
{
window.attachEvent("onload", iframeAuto);
}
else if(window.addEventListener)
{
window.addEventListener('load', iframeAuto, false);
}
//-->
</script>
</head>
<body>
<table border="1" width="200" style="height: 400px; background-color: gray">
<tr>
<td>iframe 自适应其加载的网页</td>
</tr>
</table>
</body>
</html>
【运行效果】
iframe自适应高度实例的运行效果如图5-8所示。
图5-8 iframe自适应高度实例的运行效果
【难点剖析】
本例的重点有如何获取父级页面中的iframe、如何实现iframe的自动调整。获取父级页面中的iframe，主要依靠“parent.document.getElementsByTagName("IFRAME")；”语句，其中的“parent”便是获取的父级窗口。自动调整功能实现是将调整方法绑定到onload事件中，即窗体一加载便调整iframe的大小。
555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
