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的大小。