`
shirlly
  • 浏览: 1646528 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

Iframe自适应高度控制

阅读更多
<iframe width="778" align="center" height="200" id="cwin" name="cwin" onload="Javascript:SetCwinHeight(this)" frameborder="0" scrolling="no"></iframe>

JS代码:
function SetCwinHeight(obj)
{
  var cwin=obj;
  if (document.getElementById)
  {
    if (cwin && !window.opera)
    {
      if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
        cwin.height = cwin.contentDocument.body.offsetHeight; 
      else if(cwin.Document && cwin.Document.body.scrollHeight)
        cwin.height = cwin.Document.body.scrollHeight;
    }
  }
}



在iframe里面显示的页面,还要加点这样的样式控制:
<style type="text/css">
        html, body
        {
            overflow-x: hidden;
            overflow: auto;
            margin: 0px;
            height: 100%;
        }
    </style>
分享到:
评论

相关推荐

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

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

    再谈iframe自适应高度

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

    iframe自适应高度和宽度

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

    js控制iframe 自适应高度

    iframe自适应高度:根据屏幕的高度,自动增减。包括适应浏览器高度的改变。

    iframe自适应高度demo

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

    iframe自适应高度 .txt

    ### iframe自适应高度知识点详解 #### 一、概述 在网页设计与开发中,`&lt;iframe&gt;`(Inline Frame)是一种常用的HTML元素,用于在当前页面内嵌入另一个HTML文档。随着响应式设计的需求日益增加,如何使`&lt;iframe&gt;`内...

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

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

    .net 网页的布局框架 iframe自适应高度 js设置链接样式

    最后,压缩包中的"设置页面框架及iframe自适应高度"可能包含了一个或多个文件,比如HTML、CSS、JavaScript和可能的ASP.NET服务器端代码文件。这些文件共同构成了这个简单的布局示例,通过合理的HTML结构、CSS样式和...

    iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)

    iFrame通过`&lt;iframe&gt;`标签引入,属性包括`src`(指定要加载的URL)、`width`和`height`(设置宽度和高度)、`frameborder`(控制边框显示)等。 2. **JavaScript解决方案**: - **MutationObserver**:这是一种...

    iframe自适应高度

    ### iframe自适应高度实现原理与应用 #### 一、引言 在网页开发过程中,`iframe`(Inline Frame)常被用于嵌入另一个HTML文档或其他类型的文档,如PDF或SWF文件等。然而,默认情况下,`iframe`的高度是固定的,这...

    iframe高度自适应

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

    iframe_自适应高度(简单好用).txt

    ### 知识点一:`iframe`自适应高度的原理 `iframe`自适应高度主要依赖于JavaScript来动态调整其高度属性。核心思路是监听`iframe`加载完成事件(`onload`),然后通过访问`iframe`内部文档的高度信息,计算出正确的...

    Iframe 框架自适应被嵌入页面高度

    实现Iframe自适应高度的主要方法是通过JavaScript来获取并设置Iframe的`height`属性。以下是一种常见的实现方式: ```javascript function resizeIframe(iframeId) { var iframe = document.getElementById(iframe...

    JAVASCRIPT让IFRAME框架的高度自适应

    在IFRAME框架中,我们可以使用table元素来控制IFRAME框架的高度。在IFRAME框架的onload事件中,我们可以调用initFrameHeight函数来设置table元素的高度,以便IFRAME框架的高度能够正确地自动调整。 最后,我们可以...

    三谈Iframe自适应高度代码

    通过上述方法,可以在多数情况下解决iframe自适应高度的问题。不过,实际操作中可能还会遇到其他问题,比如跨域限制等。跨域问题是指当iframe加载的页面与主页面不在同一个域时,出于安全考虑,浏览器会限制...

    iframe跨域常用问题和iframe页面自适应

    2. **CSS样式调整**:使用CSS来控制`iframe`的布局。可以使用`max-width`和`max-height`限制`iframe`的最大尺寸,避免内容溢出。同时,设置`display: block;`和`margin: 0 auto;`可以让`iframe`居中。 3. **响应式...

    iframe自适应内嵌页的高试,无srcoll

    标题“iframe自适应内嵌页的高试,无srcoll”提示我们关注的是如何使`iframe`内容自适应容器,并且不显示滚动条,以保持页面的整洁和专业感。 首先,让我们理解`iframe`的基本结构。一个简单的`iframe`标签如下: `...

    Iframe自适应高度兼容ie,firefox多浏览器

    接下来将详细探讨实现Iframe自适应高度的方法以及跨浏览器兼容性的关键点。 首先,Iframe是一种在网页中嵌入另一个HTML文档的方式,可以视为一个网页内的“网页窗口”。它具有自己的URL,可以独立加载内容。但是,...

    利用location.hash实现跨域iframe自适应

    www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....

    iframe 自适应大小实现代码

    A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的...

Global site tag (gtag.js) - Google Analytics