`

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`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    总的来说,通过使用JavaScript动态计算`&lt;iframe&gt;`内容的高度并设置`&lt;iframe&gt;`的高度,可以有效地解决`&lt;iframe&gt;`内容高度自适应以及设置高度后无法缩小的问题。同时,要注意兼容性问题和跨域限制,以确保在各种环境下...

    再谈iframe自适应高度

    - **JavaScript/jQuery方法**:可以监听iframe的`load`事件,当内容加载完成后,通过JavaScript或jQuery获取iframe的contentWindow或contentDocument对象,然后计算其body或documentElement的高度,并设置到iframe...

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中,iframe(Inline Frame)是一种内联框架,常用于在同一个HTML文档中嵌入...

    iframe自适应宽高

    作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM可以使网页大小使用MutationObserver。 发现可以导致页面大小调整事件(窗口大小调整,CSS动画和...

    iframe自适应高度(兼容多种浏览器)

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...

    iframe自适应高度和宽度

    本文详细介绍了如何实现`iframe`的高度和宽度自适应,包括基本原理、示例代码以及解决兼容性问题的方法。通过这些技术,可以使`iframe`更加灵活地适应不同的内容变化,提高用户体验。在实际应用中,还需要根据具体...

    JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)

    jQuery的iframe高度自适应解决方案通常涉及到监听iframe的“load”事件,当iframe内容加载完成后,获取其实际内容高度并设置为iframe的height属性。这种方法可以确保iframe始终能完全显示其内部内容,避免滚动条的...

    js实现iframe自适应高度

    本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性,用于指定要加载的...

    iframe自适应高度(兼容目前所有主浏览器)

    iFrame 自适应高度是前端开发中常见的问题,很多开发者在搜索引擎中搜索相关解决方案,但大多数文章只能解决静态高度的问题,而忽视了 JS 操作 DOM 之后的动态同步问题。同时,在浏览器兼容性方面也存在一定的漏洞。...

    iframe跨域嵌套自适应高度

    本文将详细介绍如何实现`iframe`跨域嵌套下的自适应高度调整,并讨论如何解决因跨域嵌套而可能引起的`session`丢失问题。 #### 一、`iframe`自适应高度原理与实现 1. **基本概念**: - **`iframe`**:`iframe`即...

    jquery对iframe自适应高度插件

    总之,“jquery对iframe自适应高度插件”是解决`iframe`高度自适应问题的一个强大工具,它的易用性和效率使得它成为开发者处理`iframe`高度问题的首选方案。通过合理利用这个插件,可以避免手动计算和调整`iframe`...

    iframe自适应高度兼容各主流浏览器

    下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:iFrame的基本概念 iFrame(Inline Frame)是HTML语言中的一种标签,用于在网页中嵌入另一个网页或文档。iFrame可以用来实现内容的内嵌、广告、Widget等...

    iframe 自适应高度

    ### iframe自适应高度实现方法详解 在网页设计与开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前文档中嵌入另一个HTML文档。然而,在实际应用过程中,经常会遇到`iframe`内容高度固定导致页面...

    iframe自适应高度demo

    为了解决这个问题,我们需要实现`iframe`自适应高度的功能。有多种方法可以实现这一点,下面将详细介绍其中的几种常见方法。 1. **JavaScript/jQuery解决方案**: 使用JavaScript或jQuery,我们可以监听`iframe`的...

    iframe自适应高度的简单解决办法

    本篇将深入探讨如何实现`iframe`自适应高度的简单解决办法。 首先,我们需要了解`iframe`的基本结构。在HTML中,创建一个`iframe`标签如下: ```html &lt;iframe src=...

    iframe自适应高度,亲测完美兼容IE6-9,Chrome,Opera,firefox,safari

    因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...

    基于jquery的兼容各种浏览器的iframe自适应高度的脚本

    在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时,我们首先需要理解几个关键概念:iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe,即Inline Frame,是HTML中一个用于在当前...

    iframe自适应高度说明文档

    为了解决这个问题,实现`iframe`自适应高度变得尤为重要。 #### 为什么需要`iframe`自适应高度? - **优化用户体验**:避免用户在不同设备上滚动过多空白区域。 - **提高页面加载效率**:动态调整高度可以减少不必...

Global site tag (gtag.js) - Google Analytics