`
Rainbow702
  • 浏览: 1078415 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类

动态设置iframe高度(iframe高度自适应)

    博客分类:
  • web
阅读更多

如果需要对画面中的部分区域作局部刷新,大家可能都会想到使用ajax。

但有些情况下,须使用在页面中嵌入一个iframe来作局部刷新。

对于使用iframe的情况,发现有一个问题,就是iframe中的页面的高度可能会很高,但是外面页面并不会被iframe内部页面给撑开,如下面的结构:

<div id="content">
    <div id="frame">
        <iframe id="mainFrame" name="mainFrame" scrolling="no" src="xxx"></iframe>
    </div>
</div>

如果不作特别处理,那么 frame 这个div的高度将是固定的(chrome下好像是150px)。

显然,这肯定是有问题的。

那么,要怎么让外部的页面的高度,随着iframe的高度变化而变化呢?

网上搜索了之后,我的作法如下:

    // calculate the height of the main frame dynamically
    (function() {
        var cacheHeight = 0;
        function run() {
            var mf = $("#mainFrame")[0];
            // when the main frame has already been loaded, the check its height
            if (mf && mf.contentDocument && mf.contentDocument.body) {
                var iframeHeight = $("#mainFrame")[0].contentDocument.body.clientHeight;
                if (iframeHeight && iframeHeight != cacheHeight) {
                    // cache the main frame height
                    cacheHeight = iframeHeight;
                    $("#mainFrame").height(iframeHeight);
                }
            }
            setTimeout(run, 200);
        }
        run();
    })();

大概思路是:

每隔一定时间(上面是200ms)去检测iframe内部页面的高度,如果它的高度发生了变化,那么则改变外部页面的高度。

也许有人觉得 200ms就检测一次,会不会有性能问题。就我自己使用的感觉来说,根本感觉不到有任何性能问题。

分享到:
评论

相关推荐

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

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

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

    为了解决这个问题,我们需要一种方法来动态地调整`iframe`的高度,使其与内容匹配。这种技术通常涉及到JavaScript,通过监听`iframe`的`load`事件,然后获取`iframe`内的文档高度,并设置到`iframe`的`height`属性上...

    js实现iframe自适应高度

    4. **计算并设置新的高度**:在`load`事件的回调函数中,我们可以计算`iframe`内容的高度,然后将其设置为`iframe`的高度。 ```javascript function adjustIframeHeight(iframe) { var iframeDoc = iframe....

    Iframe 高度自适应,js控制Iframe 高度自适应.docx

    "Iframe 高度自适应,js 控制 Iframe 高度自适应" Iframe 高度自适应是指在网页中嵌入的 iframe 元素能够根据其内容自动调整高度,以适应不同的浏览器和屏幕尺寸。js 控制 Iframe 高度自适应是指使用 JavaScript ...

    iframe自适应宽高

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

    iframe自适应高度和宽度

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

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

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

    iframe高度自适应.pdf

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

    Iframe 高度自适应浏览器高度

    然而,当Iframe的内容动态变化或者内容长度超过预设的高度时,我们就需要实现高度自适应。有几种常见的方法可以实现这一目标: 1. **JavaScript/jQuery**: 一种常见的方法是使用JavaScript或jQuery监听页面的...

    iframe自适应高度.rar

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

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

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

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....

    jquery对iframe自适应高度插件

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

    iframe自适应高度demo

    CSS3的Flexbox模型允许我们更灵活地布局网页元素,包括动态调整`iframe`的高度。可以在`iframe`的父容器上应用`display: flex`和`align-items: stretch`,使得`iframe`自动填充其容器的高度。 ```css .iframe-...

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

    1. **CSS属性**:`iframe`的`style`属性可以设置`height`和`width`为`auto`或`100%`,但这种方法通常不足以实现完全自适应,因为浏览器的安全策略会限制跨域访问内容的高度和宽度信息。 2. **JavaScript**:使用...

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

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

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

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

    iframe跨域自适应高度模板

    同时,`iframe`内容的动态加载可能使得其高度不固定,如果不能自适应高度,可能会导致页面布局出现问题。本模板将介绍如何处理`iframe`的跨域和自适应高度这两个关键问题。 首先,让我们了解`iframe`跨域。由于同源...

    iframe高度自适应

    然而,`iframe` 的高度自适应往往是一个常见的问题,特别是当`iframe`内容动态加载或者不同浏览器之间存在差异时。本文将深入探讨如何实现`iframe`的高度自适应,以确保内容在所有浏览器中都能正确显示。 首先,...

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

    iFrame自适应高度兼容各主流浏览器 iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:...

Global site tag (gtag.js) - Google Analytics