今天在工作中遇到有关一个主页面中加载多个Iframe标签,要求Iframe自适应高度,不许出现滚动。当时做了好久还是没有做到自适应高度,现在解决了,共享如下:
假定主页面的部分代码如下:
<body>
<div><iframe id="frame1" src="index2.htm" width="100%" scrolling="no" marginwidth="0" marginheight="0" border="0"></iframe></div>
<br />
<div><iframe id="frame2" src="index3.htm" width="100%" scrolling="no" marginwidth="0" marginheight="0" border="0"></iframe></div>
</body>
让Iframe可以自动随页面高度调整和自动适应,在被嵌套的Ifrmae页面代码</body>标记之前,插入下段代码:
<script for=window EVENT=onload language="JavaScript" type="text/javascript">
parent.document.getElementByIdx('frame1').style.height=document.body.scrollHeight;
</script>
现在的页面都要兼容IE和firefox,在IE和firefox中有些属性值是不一样的,这大家都知道,今天我在弄一个页面的iframe的高度时就碰到,在网上参考了这篇文章之后【网址:http://www.cnblogs.com/anderszhao/archive/2006/09/20/509236.html】解决方案如下:
function setIframeHeight()
{
var iframe = document.getElementById("ifrid");//获取Iframe对象 ie和firefox都可以获得
try{
//getOs()方法是获取浏览器类型 可参考我的另外一篇短文,把代码直接copy过来就可以使用了
//http://linjia06.blog.163.com/blog/static/46089350201105115011967/
if(getOs()=='MSIE'){
var bHeight = iframe.contentWindow.document.body.scrollHeight;//IE
iframe.style.height = bHeight;
}else if(getOs()=='Firefox'){
var ffHeight=iframe.contentDocument.body.scrollHeight;//FireFox
iframe.height = ffHeight;
}
else{
//iframe.style.height = 300px;
}
}
catch (ex){}
}
请注意ie和firefox获取对象的不同,ie为contentWindow、firefox为contentDocument 这就是在IE和firefox中有些属性值是不一样的地方,哎,总是苦了我们这些程序员!
分享到:
相关推荐
javascript动态调整iframe高度
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
当你在页面上使用了iframe之后...这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。 首先,在你的主页面上必须包含以下这段javascript代
iframe是网页设计中经常用来装载子页使用的,如何让iframe随着动态装载的子页(主页不刷新)自动适应所装子改变在小是我们经常要处理的问题;现给出两个非常简单的例子,从不同的角度来实现iframe根据最新加载的子页自动...
本文实例讲述了jQuery获取与设置iframe高度的方法。分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度: 复制代码 代码如下:var iframe...
iframe包含的页面的高度,兼容性好,iframe高度自适应
iframe高度自适应。点击链接载入网页,脚本检测iframe页面高度并动态增加父页面高度
iframe设置高度随子页高度的变化而变化 0分资源共享
iframe自适应高度和宽度
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
iframe自适应高度(DOM动态操作)
纯JS实现的iframe自适应高度。兼容主流浏览器。
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
iframe解决高度的终极代码,可兼容所有浏览器,调用页面有效不出现BUG
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe自动适应高度
iframe之间进行控制,这样更有利于程序的编写,希望对大家有所帮助。
iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe...