JS代码实现iframe自适应高度

2012-10-25 来源：网络

【实例名称】

JS代码实现iframe自适应高度

【实例描述】

iframe框架可以动态加载网页，并能嵌入到当前页面中，实现页面嵌套的功能。为了更好地显示子页，本例学习如何自动调整iframe的高度。

【实例代码】

 <html> 
<head> 
<title>iframe自适应网页-学无忧（www.xue51.com）</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、如何实现iframe的自动调整。获取父级页面中的iflame，主要依靠“parent,document,getElementsBylhgName(”IFRAME”)；”语句，其中的“parent”便是获取的父级窗口。自动调整功能实现是将调整方法绑定到onload事件中，即窗体一加载便调整iflame的大小。

【源码下载】

本实例JS代码下载