`

iframe 高度自适应 总结篇

阅读更多
<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>   
  
<script type="text/javascript">   
  
function reinitIframe(){   
  
var iframe = document.getElementById("frame_content");   
  
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("reinitIframe()", 200);   
  
</script>  

 

如果只考虑FX和IE,并且,iframe里面内容也不进行DOM操作,那仍然可以用最简单的传统处理方式:

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>  

 

这问题,我寻找了好多资料,都没这篇讲解的详细

 

 转自:http://lancijk.iteye.com/blog/621352

分享到:
评论

相关推荐

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

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

    Iframe 高度自适应浏览器高度

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

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

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

    iframe高度自适应.pdf

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

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

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

    iframe高度自适应

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

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

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

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

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

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

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

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

    本篇文章将深入讲解如何使用jQuery来解决`iframe`高度自适应的问题,并且确保代码在多数浏览器中都能完美运行。 首先,我们了解`iframe`的基本概念。`iframe`(Inline Frame)是HTML中的一个元素,用于在当前文档中...

    js实现iframe自适应高度

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

    iframe跨域自适应高度模板

    总结来说,`iframe`跨域自适应高度模板主要是通过`CORS`解决跨域限制,通过JavaScript监听`load`事件或使用`postMessage`通信来实现内容高度的动态调整。这些技术在现代网页开发中十分常见,能帮助我们更灵活地整合...

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

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

    iframe高度自适应,多浏览器兼容

    本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe`标签的基本结构如下: ```html &lt;iframe src=...

    iframe自适应宽高

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

    iframe自适应高度和宽度

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

    解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

    ### 解决IE、Firefox、Chrome、Safari浏览器中iframe显示高度自适应问题 在Web开发中,`iframe`(Inline Frame)元素常被用于嵌入另一个HTML文档到当前页面中,这种技术为开发者提供了极大的便利,例如加载广告、...

    iframe高度自适应 js

    ### iframe高度自适应JS知识点详解 #### 一、概述 在网页开发中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就需要用到`&lt;iframe&gt;`标签。但是,默认情况下,`&lt;iframe&gt;`的高度是固定的,这往往会导致...

    iframe自适应高度demo

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

Global site tag (gtag.js) - Google Analytics