`

iframe 自适应 子页面高度

阅读更多
    之前已经弄过iframe自适应高度,但是会有如下问题:1.还是有滚动条出现;2.js修改页面,页面高度变化了,iframe高度没有变化;3iframe的高度会一直以最大的那个高度为准,导致短页面也很长。
    网上搜索资料后,捣腾出如下可以解决如上问题的代码:
html代码:
<iframe src="${contentPageUrl}" id="win" name="win" width="100%" onload="this.height=0;" frameborder="0" scrolling="no"></iframe>

javascript代码:
function reinitMainContentIframe() {
var iframe = document.getElementById("win");
try {
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
} catch (ex) {
}
}
window.setInterval("reinitMainContentIframe()", 200);

解决
分享到:
评论

相关推荐

    iframe自适应子页面内容高度

    2. JavaScript处理:通过`contentWindow`和`contentWindow.document`获取子页面高度,或使用`postMessage`和`message`事件进行跨域通信。 3. 动态调整:在父页面中监听事件,接收到高度信息后更新`iframe`的高度。 ...

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

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

    此外,由于跨域安全限制,`&lt;iframe&gt;`内页面与父页面可能无法进行通信,这会影响高度自适应功能的实现。确保`&lt;iframe&gt;`加载的页面与包含它的页面位于相同的源(协议+域名+端口)下,或者`&lt;iframe&gt;`加载的页面明确通过...

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    iframe页面的高度iframe高度自适应

    iframe包含的页面的高度,兼容性好,iframe高度自适应

    iframe自适应高度和宽度

    ### iframe自适应高度和宽度详解 在Web开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果,广泛应用于各种复杂的网页布局中。然而,...

    iframe根据页面内容自适应高度和宽度

    本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ```html &lt;iframe src=...

    iframe自适应高度.rar

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

    iframe自适应内容页面的高度

    然而,当嵌入的页面高度不固定时,可能会导致`iframe`显示不完整,用户需要滚动`iframe`内部才能查看全部内容。为了解决这个问题,我们需要让`iframe`自适应其内容页面的高度,确保内容能够完全展示,提高用户体验。...

    js实现iframe自适应高度

    为了解决这个问题,我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案,确保在各种主流浏览器中都能正常工作。 首先,理解`iframe`的基本结构和属性是...

    再谈iframe自适应高度

    - 默认情况下,iframe的高度需要手动设定,但不同内容的页面高度各不相同,如果设定不当,可能会导致内容溢出或显示不全。 - 另一个问题是跨域问题,由于同源策略的限制,浏览器不允许JavaScript在不同的源之间...

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

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

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

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

    jquery对iframe自适应高度插件

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

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

    被加载页面可以切换一个绝对定位的层,来使页面高度动态变化。 iFrame 自适应高度是前端开发中需要注意的问题,需要深入探讨以解决 JS 操作 DOM 引起的高度变化问题,并且需要注意浏览器兼容性问题。

    iframe自适应高度(DOM动态操作)

    ### iframe自适应高度(DOM动态操作) #### 概述 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际...

    iframe 自适应高度

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

    iframe自适应高度demo

    `iframe`的自适应高度是一项关键技术,它确保了嵌入的内容能够完全显示,避免滚动条的出现,从而提供更好的用户体验。 `iframe`的基本语法如下: ```html &lt;iframe src=...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    iframe高度自适应.pdf

    实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时,通过JavaScript动态计算嵌入内容的实际高度,并相应地调整`iframe`的高度。这种方法的核心在于编写合适的JavaScript函数来获取嵌入内容的...

Global site tag (gtag.js) - Google Analytics