在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。

页面html节点上要有

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<iframe id="mainFrame" name="mainFrame" scrolling="no" src="Index.aspx"
            frameborder="0" style="padding: 0px; width: 100%; height: 1000px;"></iframe>
调用
<script type="text/javascript">
        startInit('mainFrame', 560);
</script>
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = false;
var isFireFox = false;
var isChrome = false;
var isSafari = false;
var isIE = false;
var iframeTime;
function reinitIframe(iframeId, minHeight) {
    try {
        var iframe = document.getElementById(iframeId);
        var bHeight = 0;
        if (isChrome == false && isSafari == false)
            bHeight = iframe.contentWindow.document.body.scrollHeight;

        var dHeight = 0;
        if (isFireFox == true)
            dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
        else if (isIE == false && isOpera == false)
            dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        else
            bHeight += 3;
        var height = Math.max(bHeight, dHeight);
        if (height < minHeight) height = minHeight;
        iframe.style.height = height + "px";
    } catch (ex) { }
}
function startInit(iframeId, minHeight) {
    isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
    isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
    isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
    isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        isIE = true;
    reinitIframe(iframeId, minHeight);
    if (iframeTime != null)
        clearInterval(iframeTime)
    iframeTime = window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}

测试发现兼容浏览器ie6-11、chrome+、firefox、opera、Safari、傲游云浏览器、360浏览器，兼容性更好，其他未测试，如发现高度不能自适应，请留言给我。

参考http://www.kuqin.com/webpagedesign/20080516/8536.html

更新日志
2015-1-15 更新兼容IE11自动高度

2015-4-15 优化判断性能，同时修复iframe每加载一次，都会同时启用一个新的window.setInterval，导致多个window.setInterval同时运行。

转自：http://www.cnblogs.com/slyzly/articles/2422737.html

总结iframe高度自适应，自适应子页面高度的更多相关文章

  1. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  2. iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)

    最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...

  3. CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

  4. iframe父页面和子页面高度自适应

    父页HTML: <iframe  id="mainframe" name="mainframe"  style="width:100%;&quo ...

  5. iframe高度自适应，自适应子页面高度

    html <iframe id="mainFrame" name="mainFrame" scrolling="no" src=&qu ...

  6. ifame高度自动适应子页面内容

    被这个问题折磨了好久,试了很多方法都不行,总算解决了,记录一下. <div class="iframe-pro" id="iframe-proid"> ...

  7. iframe动态改变内嵌页面高度

    test.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...

  8. 父div高度不能根据子div高度自动变化的解决方案

    <div id="parent"> <div id="content"> </div> </div> 当cont ...

  9. iframe弹出层中关闭包含iframe的div（子页面调用父页面js函数）

    父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;" ...

随机推荐

  1. html 笔记

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Docker中开启sshd服务

    ssh服务安装 安装ssh服务 #yum install openssh-server -y 安装passwd(修改密码需要) #yum install passwd -y 修改sshd_config ...

  3. hibernate----hibernate的基础设置

    本次学习的内容是hibernate的基础设置 具体内容为: 一.准备工作 1.新建java工程 2.自动引入相关库(自动生成SessionFactory) 3.将数据库驱动拿进来 4.添加hibern ...

  4. Hadoop Standalone and Pseudo Mode

    . Required Softwareyum install openssh-server rsync java-1.8.0-openjdk-devel . Setup Hostname/etc/ho ...

  5. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  6. MVC Filter自定义验证（拦截）

    namespace QS.Web.Extensions { /// <summary> /// 验证session.权限 状态 /// </summary> [Attribut ...

  7. Android应用程序消息处理机制笔记

    看老罗的Android源码情景分析学习的时候,边抄边理解再总结.希望能为面试提供点帮助吧. 1.Android应用程序是通过消息来驱动,Android应用程序每一个线程在启动时,都可以首先在内部创建一 ...

  8. 数据结构与算法 - OC 实现

    [原创]http://www.cnblogs.com/luoguoqiang1985/ 冒泡排序:通过N-1次对剩余未排序元素中最大(小)元素的上浮来实现排序,上浮过程通过交换相邻元素实现. 选择排序 ...

  9. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  10. Mybatis 学习历程

    MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架. MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装. MyBatis可以使用简单的XML或注 ...