您当前的位置: 首页 » HTML/XHTML/XML编程 » Iframe 自适应高度 无限级父框架 多层框架自适应
Iframe 自适应高度 无限级父框架 多层框架自适应
论坛链接
问题描述
今天在处理一个Iframe自适应高度时遇到一个多层Iframe引用时的高度不能撑开的问题，效果同Demo1.
原因分析
问题是由引用的顺序引起的，我们假设有3层Iframe引用，h1.html,h2.html,h3.html h1包含h2,h2又包含h3,h3.html中有内容会出现高度适应问题，一般的处理方式是我们在引用h3的iframe中加入onload事件来让这个Iframe高度自适应引用的页面高度。这时我们打开h1.html就开发页面看起还是没有撑开，这是因为页面是一级一级的加载下去的，当h1引用h2时，h2的高度是固定的，当h3加载完毕的时候h2的高度做了变化，但是这时h1的引用页面高度并没有改变就造成了页面看起来还是没有撑开，经和同事讨论后编写了一个JS的自动重新计算parent(父页面)中Iframe元素的高度，从而解决这个问题，原理主要是通过一直循环获取页面parent的Iframe元素，当获取到top层时就结束
代码
单个Iframe适应
Javascript代码
1.onload="this.style.height=iframe1.document.body.scrollHeight"
onload="this.style.height=iframe1.document.body.scrollHeight"
注：iframe1为该框架的ID，我在尝试不硬写名字的自适应方法，如果成功就换上来。
自适应多级Iframe高度
Javascript代码
1.//进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度
2.function autoHeight(){
3. var doc = document,
4. p = window;
5. while(p = p.parent){
6. var frames = p.frames,
7. frame,
8. i = 0;
9. while(frame = frames[i++]){
10. if(frame.document == doc){
11. frame.frameElement.style.height = doc.body.scrollHeight;
12. doc = p.document;
13. break;
14. }
15. }
16. if(p == top){
17. break;
18. }
19. }
20.}
今天在处理一个Iframe自适应高度时遇到一个多层Iframe引用时的高度不能撑开的问题，效果同Demo1.
原因分析
问题是由引用的顺序引起的，我们假设有3层Iframe引用，h1.html,h2.html,h3.html h1包含h2,h2又包含h3,h3.html中有内容会出现高度适应问题，一般的处理方式是我们在引用h3的iframe中加入onload事件来让这个Iframe高度自适应引用的页面高度。这时我们打开h1.html就开发页面看起还是没有撑开，这是因为页面是一级一级的加载下去的，当h1引用h2时，h2的高度是固定的，当h3加载完毕的时候h2的高度做了变化，但是这时h1的引用页面高度并没有改变就造成了页面看起来还是没有撑开，经和同事讨论后编写了一个JS的自动重新计算parent(父页面)中Iframe元素的高度，从而解决这个问题，原理主要是通过一直循环获取页面parent的Iframe元素，当获取到top层时就结束
代码
单个Iframe适应
Javascript代码
1.onload="this.style.height=iframe1.document.body.scrollHeight"
onload="this.style.height=iframe1.document.body.scrollHeight"
注：iframe1为该框架的ID，我在尝试不硬写名字的自适应方法，如果成功就换上来。
自适应多级Iframe高度
Javascript代码
1.//进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度
2.function autoHeight(){
3. var doc = document,
4. p = window;
5. while(p = p.parent){
6. var frames = p.frames,
7. frame,
8. i = 0;
9. while(frame = frames[i++]){
10. if(frame.document == doc){
11. frame.frameElement.style.height = doc.body.scrollHeight;
12. doc = p.document;
13. break;
14. }
15. }
16. if(p == top){
17. break;
18. }
19. }
20.}
#2楼发布者：superadmin时间：2011-02-28 12:47:08
让IFRAME自动调整大小
在页面中有时会用到IFRAME，但指向页面的大小往往会有变动，这里我们可以通过添加ONLOAD事件来自动调整其大小
代码如下：
Html代码
1.onload="this.height=this.contentWindow.document.body.scrollHeight"
在页面中有时会用到IFRAME，但指向页面的大小往往会有变动，这里我们可以通过添加ONLOAD事件来自动调整其大小
代码如下：
Html代码
1.onload="this.height=this.contentWindow.document.body.scrollHeight"
#3楼发布者：superadmin时间：2011-02-28 12:47:19
可以用框架，直接显示你想要显示的网页。
代码：<IFRAME> </IFRAME>
例如：<IFRAME id=headlogin marginWidth=0 marginHeight=0 src="/bbs/index.php" frameBorder=0 width=100% scrolling=no height=2000 onload="this.height=this.contentWindow.document.body.scrollHeight"></IFRAME> 引用的是某个论坛的首页。
代码：<IFRAME> </IFRAME>
例如：<IFRAME id=headlogin marginWidth=0 marginHeight=0 src="/bbs/index.php" frameBorder=0 width=100% scrolling=no height=2000 onload="this.height=this.contentWindow.document.body.scrollHeight"></IFRAME> 引用的是某个论坛的首页。
#4楼发布者：superadmin时间：2011-02-28 12:49:05
跨域都白扯
不如在父页面
var iframe = document.getElementById(xx);
if(iframe)
{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
不如在父页面
var iframe = document.getElementById(xx);
if(iframe)
{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}