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

本文详细介绍了如何通过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的大小。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值