`
Odysseus_110
  • 浏览: 121034 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

js 控制iframe 自适应高度

 
阅读更多



<iframe width="300" id="iframetestid" frameborder="0" scrolling="no" src="test.php" onload="setTimeout(function(){reSetIframe('iframetestid');},200);" ></iframe>

 

function reSetIframe(iframeid){
    var iframe = document.getElementById(iframeid);
    var height = 500;
    try{
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        height = Math.max(bHeight, dHeight);
        iframe.height = height;
    }catch (ex){
        height = Math.max(bHeight, dHeight);
        iframe.height = height;
   }
}

 


这个适应于各种浏览器,从ie6 7 8 9 一直到 ff,chrome

调试了很久的ie6一直取不到值,最后发现原因是要设置函数reSetIframe 定时执行,直接执行虽然用onload还是取不到,要延迟一会ie6才能得到height值。

 

 

分享到:
评论

相关推荐

    js控制iframe 自适应高度

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

    js实现iframe自适应高度

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

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

    这段描述中提到的“完美自适应高度嵌套代码”很可能就是一个实现上述逻辑的JS代码片段,它可能包含了针对不同浏览器的兼容性处理,比如对于IE6-9这些老版本浏览器的特殊处理,因为它们对某些DOM操作和事件处理的支持...

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

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

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中,iframe(Inline Frame)是一种内联框架,常用于在同一个HTML文档中嵌入...

    iframe自适应高度(兼容多种浏览器)

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...

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

    js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度,使其能够自动调整以适应内容的高度。 在 iframe 高度自适应中,需要考虑多种浏览器的兼容性问题,包括 Firefox、IE、Opera 等不同的...

    再谈iframe自适应高度

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

    iframe自适应高度和宽度

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

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

    iFrame 自适应高度是前端开发中常见的问题,很多开发者在搜索引擎中搜索相关解决方案,但大多数文章只能解决静态高度的问题,而忽视了 JS 操作 DOM 之后的动态同步问题。同时,在浏览器兼容性方面也存在一定的漏洞。...

    jquery对iframe自适应高度插件

    为了解决这个问题,`jQuery`提供了一个专门的插件——"jquery对iframe自适应高度插件"。 这个插件是专门为了解决`iframe`高度自适应的问题而设计的,它允许`iframe`根据其内部内容自动调整高度,确保用户无需滚动就...

    js 实现 iframe自适应高度

    js 实现 iframe自适应高度! 值得下载看看!资源免费,大家分享!!

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

    iFrame自适应高度兼容各主流浏览器 iFrame自适应高度是指在网页中嵌入iFrame时,使其高度能够自动适应其内容的高度,从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。 知识点1:...

    iframe 自适应高度

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

    iframe自适应高度demo

    综上所述,`iframe`自适应高度是通过JavaScript、CSS布局技术(如Flexbox或Grid)、或者通过跨窗口通信来实现的。选择哪种方法取决于你的项目需求,如兼容性、复杂性、是否能控制`iframe`源等因素。正确实现`iframe`...

    iframe自适应高度,亲测完美兼容IE6-9,Chrome,Opera,firefox,safari

    因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...

    基于jquery的兼容各种浏览器的iframe自适应高度的脚本

    在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时,我们首先需要理解几个关键概念:iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe,即Inline Frame,是HTML中一个用于在当前...

    iframe自适应高度js demo

    在网页开发中,`iframe`(Inline Frame)是一种嵌入式框架元素,它允许我们在一个HTML文档中嵌入另一个HTML文档。...通过查看并运行这些文件,你可以更好地理解并实践`iframe`自适应高度的JavaScript解决方案。

    iframe自适应高度说明文档

    ### iframe自适应高度详解 在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,默认情况下,`iframe`的高度是固定的,这可能导致页面布局问题,尤其是当嵌入的内容高度不确定...

    JavaScript 处理Iframe自适应高度(同或不同域名下)

    首先,我们来探讨同域名下的Iframe自适应高度的处理方法。当Iframe及其所嵌入页面位于同一域名时,可以通过JavaScript来获取嵌入页面的实际高度,并在Iframe的onload事件中设置其高度。具体做法是,在Iframe标签中...

Global site tag (gtag.js) - Google Analytics