百翔博客

★百翔网络★24小时服务热线:029-87617572,7年网站建设经验,您身边的网站建设专家专业致力于西安网站建设,西安网站制作,西安网站设计,西安网站优化,西安网站推广,西安网站维护,西安网页设计,西安网页制作,西安网站托管,西安网站建设公司,西安网站制作公司,西安网站设计公司,西安网站优化公司,西安做网站的公司,西安网页设计公司,西安网页制作公司,西安网站推广公司,西安网站维护公司等业务,品质保障,追求卓越!

« 网页木马检测与防护怎么弄新浪微博秀?如何在网站上嵌入新浪微博 »

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

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

 

  • 相关文章:
  • quote 1.jdkvmjk
  • For that reason pertaining to including fashion for the attitude not to mention infusing any special once you hike outside,cheap michael kors handbags increase the armoire the initial along with appealing stylish young ladies handbags. Cheap Michael Kors Handbags Outlet Ever find baffled although deciding on the best sort of handbag for your own use?
  • 2013-9-11 17:08:32 回复该留言
  • quote 2.dfsuhjj
  • individuals are employed to carrying it out all for all, cheap michael kors handbags utilizing toddler on their boss. cheap michael kors handbags it would be great should it be there is some assistance readily available for the over-stressed, multi-Tasking women of all ages of the universe?
  • 2013-9-12 15:33:48 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

网站分类

最新评论及回复

最近发表

网站收藏

友情链接

图标汇集

Powered By 西安网站建设西安网站优化西安seoseo论坛西安安防监控

Copyright 2008-2010 百翔网络www.fly810.com, All Rights Reserved.