`

js 获取iframe内容的高度 并动态设置iframe的高度

    博客分类:
  • js
 
阅读更多
var frame = document.getElementById('#frame'),
    win = frame.contentWindow,
    doc = win.document,
    html = doc.documentElement,
    body = doc.body;

// 获取高度
var height = Math.max( body.scrollHeight, body.offsetHeight,
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

frame.setAttribute('height', height);
分享到:
评论
1 楼 CodeSmith_ 2014-06-19  

相关推荐

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

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

    JS 获取iframe高度的静动态方法

    在JavaScript(JS)中,获取iframe(内联框架)的高度是一项常见的需求,特别是在构建富互联网应用或嵌入第三方内容时。下面将详细讲解如何静态和动态地获取iframe的高度。 一、静态获取iframe高度 1. **DOM属性...

    javascript动态调整iframe高度

    为了适应内容动态加载或用户交互导致的`iframe`高度变化,可以设置定时器每隔一段时间重新计算并调整`iframe`高度。但这可能增加不必要的性能开销,因此应谨慎使用。 总之,`javascript`动态调整`iframe`高度的核心...

    js实现iframe自适应高度

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

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

    2. **JavaScript**:使用JavaScript来动态获取`iframe`的内容高度和宽度。可以监听`load`事件,当`iframe`加载完成后,通过`contentWindow`和`contentDocument`属性获取内容的尺寸,然后调整`iframe`的大小。例如: ...

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

    这种技术通常涉及到JavaScript,通过监听`iframe`的`load`事件,然后获取`iframe`内的文档高度,并设置到`iframe`的`height`属性上。 以下是一个基本的实现思路: 1. 创建`iframe`元素,并设置其初始高度,例如一...

    用javascript动态调整iframe高度的方法

    这种方法对提升用户体验至关重要,特别是对于那些内容动态更新或高度不定的iframe场景。同时,如果需要调整iframe的宽度,可以参考类似的方法,主要区别在于需要获取和设置的是`width`属性而非`height`。

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...

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

    首先,需要获取 iframe 的 ID,然后使用 JavaScript 函数来获取 iframe 的内容高度,并将其设置为 iframe 的高度。这种方法可以在大多数浏览器中正常工作,但是在某些特殊情况下可能会出现问题。 例如,在 Firefox ...

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

    为了使`iframe`的高度能够自适应其内部内容的高度变化,我们需要动态地获取`iframe`内部文档的实际高度,并将这个值设置为`iframe`自身的高度。具体实现步骤如下: 1. **获取`iframe`元素**: - 使用`document....

    iframe高度自适应.pdf

    ### iframe高度自适应技术详解 在网页开发过程中,经常会遇到需要在一个页面中嵌入另一个页面的需求,这通常通过HTML的`iframe`元素实现。然而,一个常见的问题是当嵌入的内容高度变化时,如何使`iframe`的高度能够...

    js调用iframe实现打印页面内容的方法

    3. 创建一个新的iframe元素,并设置其样式为绝对定位、宽度和高度都为0,这样iframe在打印前不会影响页面布局。 4. 将iframe添加到页面的body中,并获取iframe的contentWindow.document对象,为打印做准备。 5. 将...

    iframe 自适高度 JS控制代码实现

    6. **定时更新高度**:为了应对内部内容动态变化的情况,还需要定期检查内部页面高度并更新`iframe`的高度。 #### 示例代码 下面是一段示例代码,展示了如何实现上述功能: ```javascript // 设置`iframe`高度的...

    iframe自适应高度js demo

    然而,静态设定的高度并不能满足内容动态变化的需求。 为了实现`iframe`自适应高度,我们可以利用JavaScript的DOM操作和事件监听。以下是一个简单的JavaScript函数示例,该函数动态地设置`iframe`的高度: ```...

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

    二是在主页面 iFrame 的 onload 事件中执行 JS,去取得被包含页的高度内容,然后去同步高度。然而,这两种方法都存在一定的缺陷,它们只能处理静态的内容加载,而无法解决 JS 操作 DOM 引起的高度变化问题。 为了...

    iframe自适应高度.rar

    一种常见的方法是使用JavaScript监听iframe的load事件,当iframe内容加载完成后,通过JavaScript获取iframe的实际内容高度,并将其设置为iframe的style.height属性。以下是一个简单的实现示例: ```javascript ...

    iframe自适应子页面内容高度

    首先,由于同源策略的限制,只有当`iframe`加载的页面与包含它的页面在同一域名下时,我们才能通过JavaScript获取`iframe`的内容信息。若跨域,我们需要依赖`CORS`(跨源资源共享)或者其他技术进行通信。 在同源...

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

    要实现iFrame的高度自适应,需要使用JavaScript来获取iFrame的内容高度,并将其设置为iFrame的高度。这里可以使用两种方法来获取iFrame的内容高度:一种是使用`contentWindow.document`来获取iFrame的内容文档,然后...

    JAVASCRIPT让IFRAME框架的高度自适应

    我们可以定义一个函数来获取子IFRAME框架的高度,然后将其设置为table元素的高度,以便子IFRAME框架的高度能够正确地自动调整。 通过使用JavaScript来让IFRAME框架的高度自适应,我们可以实现IFRAME框架的高度自动...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    3. **使用`miframe.js`插件**:从提供的文件名`miframe.js`来看,这可能是一个专门处理IFrame高度的插件。安装并引用该插件后,可以简化处理IFrame高度的工作。 ```javascript // 引入miframe.js Ext.onReady...

Global site tag (gtag.js) - Google Analytics