`
魏祖清
  • 浏览: 180361 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

iframe自适应高度和宽度

    博客分类:
  • js
IE 
阅读更多
兼容ff和ie

<iframe id="iframeContent" frameborder="0"  scrolling="no"  onload="setHtmlContent();" src="页面地址"></iframe>

function setHtmlContent(isIE){ 
     if(document.getElementById("iframeContent").readyState != 'complete' && isIE){
     setTimeout("setHtmlContent();",30);
     return ;
     }
      
    var frmContent = document.getElementById("iframeContent");
    var frmBody = frmContent.contentWindow.document.body;
    
    if(!frmBody) return;
    
    if(frmBody.scrollHeight>frmContent.offsetHeight){
           frmContent.height=frmBody.scrollHeight+"px";
    }
     if(frmBody.scrollWidth>frmContent.offsetWidth){
          frmContent.style.width =(frmBody.scrollWidth+30).toString()+"px" 
    }

}

setHtmlContent(true);












分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    javascript原生和jquery库实现iframe自适应高度和宽度.doc

    javascript原生和jquery库实现iframe自适应高度和宽度.doc

    iframe自适应宽高

    高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM可以使网页大小使用MutationObserver。 发现可以导致页面大小...

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

    在这个例子中,`src`属性指定了要嵌入的页面URL,`width`和`height`分别设置了`iframe`的宽度和高度。 要使`iframe`自适应内容,我们有以下几种方法: 1. **CSS属性**:`iframe`的`style`属性可以设置`height`和`...

    javascript原生和jquery库实现iframe自适应高度和宽度

    关于实现iframe自适应高度和宽度的内容,可以使用原生JavaScript和jQuery库两种方式来完成。下面将详细解释使用这两种技术的实现方法及代码示例。 ### 使用原生JavaScript实现iframe自适应高度和宽度 要使用原生...

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

    `src`属性用于指定要嵌入的页面URL,`width`和`height`属性分别定义了`&lt;iframe&gt;`的宽度和高度。`scrolling`属性可以设置为`"yes"`、`"no"`或`"auto"`,控制是否显示滚动条。而`onload`事件则可以在`&lt;iframe&gt;`内容...

    再谈iframe自适应高度

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

    jquery对iframe自适应高度插件

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

    iframe 自适应高度

    ### iframe自适应高度实现方法详解 在网页设计与开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前文档中嵌入另一个HTML文档。然而,在实际应用过程中,经常会遇到`iframe`内容高度固定导致页面...

    iframe自适应高度demo

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

    iframe自适应高度的简单解决办法

    在网页设计中,`iframe`(Inline Frame)是一种嵌入其他网页或内容的标签,它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档,你可以得到更详细的步骤和解释,以便更好地理解和应用这些技术。

    iframe自适应高度js demo

    这里的`src`属性指定了`iframe`要加载的页面,`width`和`height`分别定义了`iframe`的宽度和高度。然而,静态设定的高度并不能满足内容动态变化的需求。 为了实现`iframe`自适应高度,我们可以利用JavaScript的DOM...

    iframe自适应高度 .txt

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

    网页制作中Iframe自适应高度的解决办法

    本文将深入探讨如何解决Iframe自适应高度的问题。 首先,我们需要了解Iframe的基本语法。在HTML中,创建一个Iframe的基本结构如下: ```html &lt;iframe src=...

    iframe自适应高度

    `src`属性定义了要加载的URL,`width`和`height`分别定义了`iframe`的宽度和高度。在静态内容的情况下,我们可以直接设置固定的宽高。但在内容动态加载或跨域的情况下,这就变得复杂了。 为了解决`iframe`自适应...

    Iframe 高度自适应浏览器高度

    其中,`src`属性指定了要加载的URL,`width`和`height`分别设置了Iframe的宽度和高度。 然而,当Iframe的内容动态变化或者内容长度超过预设的高度时,我们就需要实现高度自适应。有几种常见的方法可以实现这一目标...

    iframe自适应子页面内容高度

    在上述代码中,`src`属性定义了`iframe`要加载的页面,`width`和`height`分别设置其宽度和高度。然而,若希望`iframe`的高度自动适应子页面内容,我们需要进行一些额外的处理。 首先,由于同源策略的限制,只有当`...

    IFRAME自适应

    IFRAME的基本结构包括`&lt;iframe&gt;`标签,其中包含`src`属性来指定要嵌入的页面URL,以及`width`和`height`属性定义IFRAME的宽度和高度。然而,在实际应用中,我们往往希望IFRAME能根据内容或容器的尺寸动态调整大小,...

    iframe高度自适应

    - `width`/`height`:指定`&lt;iframe&gt;`的宽度和高度。 - `frameborder`:设置边框是否显示,0为不显示,非0为显示。 2. **自适应需求**:随着内容的变化自动调整`&lt;iframe&gt;`的高度,避免出现不必要的滚动条或内容被...

Global site tag (gtag.js) - Google Analytics