`

iframe自适应高度,多层嵌套iframe自适应高度的解决方法

阅读更多

在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe的自适应宽、高,会经常用到,网上整理了一份,写在这里备用:

单个iframe 高度自适应:

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

起作用的是这句:onload="this.height=iFrame1.document.body.scrollHeight"

多层嵌套iframe 高度自适应:

A页面的iframe:

<iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" ></iframe>

B.php页面又有一个iframe:

<iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';" ></iframe>

起作用的代码是这句:onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';"

onload的时候执行了两条js语句:

1、设置当前iframe自己的高度自适应

this.height=rightform.document.body.scrollHeight  

2、设置父iframe的高度自适应(注意后面的高度单位px,如果不加单位,firefox下不起作用)

parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px'

以上代码在ie6、ie7、ie8、firefox3.5下测试通过

分享到:
评论

相关推荐

    多层嵌套iframe 自适应高度的解决方法

    多层嵌套iframe 自适应高度的解决方法

    iframe 多层嵌套 无限嵌套 高度自适应的解决方案

    然而,当`iframe`进行多层嵌套时,特别是无限嵌套,如何保证每个`iframe`的高度都能自适应其内容,避免滚动条的出现,就成为了一个挑战。本文将探讨一种解决方案,适用于`A`、`B`、`C`三个页面互相嵌套的情况。 ...

    iframe多层级自动适应高度

    然而,在实际应用中,尤其是涉及到多层嵌套时,手动设置固定高度可能会导致显示问题,因为内容的长度是动态变化的。 解决`iframe`多层级自适应高度的关键在于JavaScript或者CSS技术。一种常见的JavaScript解决方案...

    iframe实用操作锦集

    - **子页面与子页面间的传递**:如果有多层`iframe`,可以通过`parent.window.frames`访问到嵌套的`iframe`。 ```javascript var i1 = parent.window.frames['iframeId']; var val = i1.document.getElementById...

    深入解析contentWindow, contentDocument

    在示例代码中,`showIframeH`函数就展示了如何动态调整嵌套iframe的高度。首先,它获取了父级iframe的`contentWindow`,然后通过`contentWindow`进一步获取到子级和孙级iframe的`contentDocument`,计算出它们的内容...

    页面布局frameset frame

    6. **nestedframes.html** - 嵌套框架,即在一个框架内再嵌套其他框架,形成多层布局。 7. **links.html** - 在框架环境中处理链接的策略,比如链接跳转、目标框架设定等。 8. **display.html** - 可能展示了不同...

Global site tag (gtag.js) - Google Analytics