`

依据子页面的内容让iframe高度自适应

 
阅读更多
<div id="support_content" style='overflow:hidden;'>
   <iframe scrolling="no" id='sup_ctx_iframe' name='sup_ctx_iframe' marginwidth='0' style='overflow:hidden;' marginheight='0' width='100%' frameborder='no' border='0' src='' onload="setIframeHeight();"></iframe>
</div>


 function setIframeHeight() {
       var iframe = document.getElementById('sup_ctx_iframe');
       // 获取子页面的高度
       var height = window.frames["sup_ctx_iframe"].document.getElementsByTagName("body")[0].clientHeight;
        if(iframe)
        {
             if (undefined != iframe.ownerDocument
				&& undefined != iframe.ownerDocument.body.offsetHeight) {
                    iframe.height = height;
		}
	}
}


这样每当iframe加载的时候会调用该js方法,从而实现iframe高度自适应不出现滚动条。
当然如果这个iframe是被嵌入一个div里面的,那么这个div的样式需要设置一下:

.content{
	height:auto !important;
	height: 500px;
	min-height: 500px;
}
分享到:
评论

相关推荐

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

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

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

    然而,`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者,尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时,如何让`&lt;iframe&gt;`自动调整其高度以适应内容,而不会导致滚动条溢出或内容被截断,成为了一个常见需求。...

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

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

    iframe高度自适应.pdf

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

    Iframe 高度自适应浏览器高度

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

    iframe高度自适应代码及演示页面

    iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js

    jsp页面iframe高度自适应的js代码.docx

    jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素,並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用,例如在某些网页中,我们需要在 iframe 中嵌入一个内嵌页面,并且使其...

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

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

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

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

    iframe高度自适应

    在某些情况下,如果`iframe`内容与主页面同源,可以使用CSS的`resize`属性来尝试让`iframe`自适应高度。但是,这种方法并不适用于跨域的情况。 2. **JavaScript/jQuery解决方案**: 对于跨域的`iframe`,可以采用...

    iframe自适应子页面内容高度

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

    iframe跨域自适应高度模板

    由于同源策略,`iframe`默认无法访问或操作不同源的页面内容,包括获取页面高度、读取内容等。为了解决这个问题,我们可以利用`CORS`(Cross-Origin Resource Sharing,跨源资源共享)机制。在服务器端,通过设置...

    js实现iframe自适应高度

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

    iframe自适应宽高

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

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    在网页开发中,有时我们需要使用`iframe`来嵌入外部页面或者内容,但是`iframe`的高度自适应问题一直是一个常见的挑战。特别是在不同浏览器之间,由于兼容性问题,往往需要额外的处理才能达到理想的效果。本篇文章将...

    完美解决跨域iframe的高度自适应

    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。

    iframe自适应高度和宽度

    使用了`onload`事件来监听`iframe`内容加载完成,然后通过`document.all['myframe']`获取到`iframe`元素,并通过`myframe.document.body.scrollHeight`获取内部文档的实际高度,最后将这个高度设置给`iframe`元素的`...

    JAVASCRIPT让IFRAME框架的高度自适应

    为了解决这个问题,我们可以使用JavaScript来让IFRAME框架的高度自适应页面内嵌不同的网页内容。 在这篇文章中,我们将介绍使用JavaScript来让IFRAME框架的高度自适应的方法。首先,我们需要定义一个函数来获取当前...

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

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

Global site tag (gtag.js) - Google Analytics