Iframe框架自动适应高度示例详解

最新推荐文章于 2025-05-18 13:16:54 发布

原创最新推荐文章于 2025-05-18 13:16:54 发布 · 899 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #框架 #java #编程 #语言 #border

本文详细介绍了如何通过JavaScript实现Iframe框架自动适应高度的功能。提供了iframe.html和autoframe.html两个页面的实现代码，讲解了关键的iframeAuto()函数以及事件绑定方法，确保在页面加载时自动调整Iframe的大小。此外，还分析了获取父级页面中的iframe以及自动调整的难点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iframe框架可以动态加载网页，并能嵌入到当前页面中，实现页面嵌套的功能。前几天做一个网页功能时需要用到自动调整Iframe框架的大小，找了资料才找到了答案。下面先来看下实现的代码：

【实现代码】

在这里有两个页面，第一个页面是iframe.html，iframe框架就在这个页面里，实现代码如下所示：

第二个页面是autoframe.html，它会自动调整子页的大小，实现代码如下所示(代码放在子页，即第二个页)：

<html>
<head>
<title>IframeAutoHeight</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="163" style="height: 400px; background-color:gray">
<tr>
<td width="153"><DIV><STRONG>学了Java有什么用、有什么好处？<BR>
</STRONG><BR>
　　
<STRONG>1、作用：</STRONG><BR>
1)我们的目标是把学员培养成为企业需要的、能够胜任工作的、可以直接上手的JAVA软件工程师和JAVA软件高级工程师。<BR>
2)JAVA是软件编程中的具有里程碑意义的编程语言，使用的是面向对象的编程模式，它使软件的应用更加符合人类的思维模式，就像我们现在使用电脑是不是越来越方便，很大程度上也要归功于JAVA，特别是互联网的应用。<BR>
3)   JAVA语言最适合于网络编程，在当今的网络时代，无疑是主流开发语言。<BR>
<BR>
　　
<STRONG>2、好处：</STRONG><BR>
1)   因为的Java应用非常的广泛，现在很多应用系统都是采用Java技术开发<BR>
2) Java的历史比较长，有着比较成熟的体系结构<BR>
3)   Java开发人员的工资比较高<BR>
4) 学习Java可以了解很多应用系统的底层，可以进一步帮助学习更多的开发平台<BR>
5)   我们希望我们的学员在学习过程中专一，朝着一个目标去努力 </DIV></td>
</tr>
</table>
</body>
</html>
      这就是实现其功能的代码，下面再看下运行效果。

【运行效果】

【难点剖析】

本例的重点有如何获取父级页面中的iframe、如何实现iframe的自动调整。获取父级页面中的iframe，主要依靠“parent.document.getElementsByTagName("IFRAME")；”语句，其中的“parent”便是获取的父级窗口。自动调整功能实现是将调整方法绑定到onload事件中，即窗体一加载便调整iframe的大小。