如何让iframe动态创建后自动适应其大小？

<script language="javascript">
var oIframe = document.createElement("iframe");
oIframe.id = "TopIframe_ss";
oIframe.className = "iframe1";
oIframe.frameBorder = "0";
oIframe.scrolling="no";
//oIframe.width="100"
//oIframe.height="100";
oIframe.src="Test-Window-Disabled-SubWindow.htm";
document.body.appendChild(oIframe);
//oIframe.attachEvent("onload",new Function("document.getElementById('TopIframe_ss').width=document.getElementById('TopIframe_ss').document.body.scrollWidth;"));//没用。。没用没用。。
</script>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>顶栏固定高度下栏自适应测试</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{font:12px Arial, Helvetica, sans-serif;color:#000;padding:5px;}
    h2{font-size:14px;margin-top:15px;}
    .block{width:500px;height:250px;letter-spacing:1px;line-height:180%;position:relative;-moz-border-radius:5px;-khtml-border-radius:5px;border:2px solid #000;-webkit-box-shadow:5px 2px 6px #666;-moz-box-shadow:3px 2px 6px #666;}
    .topMain,.topRow{background:#d1c5a7;height:50px;line-height:50px;text-align:center;width:100%;}
    .mainContent{background:#f8f0e3;overflow:auto;}
    .mainContent p{padding:5px;}
    .mainContent p span{color:#f00;}
    /*method two*/
    /*针对FF样式*/
    .tableLayout{display:table;}
    .tableLayout div{display:table-row;}
    .tableLayout .mainRow{display:table-cell;}
    /*Iframe Css*/
    .iframeBlock{-moz-border-radius:5px;-khtml-border-radius:5px;border:2px solid #000;-webkit-box-shadow:5px 2px 6px #666;-moz-box-shadow:3px 2px 6px #666;width:800px;height:100%;}
    .iframeBlock iframe{width:100%;border:none;}
    </style>
    <!--针对IE7样式，此样式实现的目的在FF中其实也是能满足条件的-->
    <!--[if IE 7]>
    <style type="text/css">
    .topRow{position:absolute;top:0;z-index:99;}
    .mainRow{position:absolute;top:50px;bottom:0;left:0;right:0;overflow:auto;}
    </style>
    <![endif]-->
    <!--针对IE6样式,不过由于未引动怪异模式在IE6中用此种方法解决虽然自适应了可同时也给容器增加了50像素的高-->
    <!--[if IE 6]>
    <style type="text/css">
    .tableLayout{padding-top:50px;overflow:hidden;}
    .topRow{margin-top:-50px;position:relative;top:0;right:0;bottom:0;left:0;}
    .mainRow{position:relative; top:0;right:0;bottom:0;left:0;height:100%;}
    </style>
    <![endif]-->
    <script language="javascript">
    function $_id(id){return document.getElementById(id)}
    window.onload = function autoHeight(){
    var methodTwoWra  = $_id('methodJs').clientHeight;
    var methodTwoTop  = $_id('methodTwoTop').clientHeight;
    $_id('methodTwoCon').style.height = methodTwoWra - methodTwoTop + 'px';
    }function autoHeight(){
    var theHeight = $_id('iframeMain').height;
    var pageHeight = $_id('iframeMain').contentWindow.document.body.scrollHeight;
    var pageFHeight = $_id('iframeMain').contentWindow.document.documentElement.scrollHeight;
    height = Math.max(pageHeight,pageFHeight)
    if(theHeight!=height)
    $_id('iframeMain').height = height + 'px';
    }
    </script>
    </head><body>
    <h1>顶栏固定高度下栏自适应和Ifram自适应高度测试</h1>
    <!--Method One-->
    <h2>顶栏固定高度下栏自适应方法一：</h2>
    <div class="block" id="methodJs">
    <div class="topMain" id="methodTwoTop">顶部标题区域（通过js载入重置高度实现）</div>
        <div class="mainContent" style="height:100px;" id="methodTwoCon">
         <p>顶部标签区域是固定宽度的，然后现在这个区域是应该填满容器剩余区域的宽度，<span>在这个方法中我用的js来进行强制页面载入时对第二栏内容块的高度进行赋值，但是它涉及到了IE6的一个问题，在IE6中当div内容超过层后会自动的加大IE6的高度，因此要在页面中首先给它定义个height让它在载入的时候就给予它高度不让它高度撑大</span></p>
            <br /><br /><br /><br />
            <p>如果内容超出就会出现滚动条</p>
            <p>如果内容超出就会出现滚动条</p>
            <p>如果内容超出就会出现滚动条</p>
            <p>如果内容超出就会出现滚动条</p>
            <p>如果内容超出就会出现滚动条</p>
            <p>如果内容超出就会出现滚动条</p>
            <p>如果内容超出就会出现滚动条</p>
            <p>如果内容超出就会出现滚动条</p>
        </div>
    </div>
    <!--Method Two-->
    <h2>顶栏固定高度下栏自适应方法二：</h2>
    <div class="block tableLayout">
    <div class="topRow">顶部标题区域（通过css的display的table属性实现）</div>
        <div class="mainContent mainRow">
            <p>顶部标签区域是固定宽度的，然后现在这个区域是应该填满容器剩余区域的宽度，(考虑到兼容性其实是两种方法作为一个应用),<span>在这个方法中当文字内容超过宽度时FF会自适应的拉高容器高度不会出现滚动条，同时由于IE8版本以下的系列对于display的table的不兼容性只能在针对其写单独的样式控制应用定位去拉伸层叠样式,（如上针对IE系列的注释部分代码其实对在FF也是兼容的），在此方法中由于IE6的对定位的解析问题是不能展示出说要的效果的因此还必须针对IE6写单独样式，在这里由于是多个展示效果未引动IE怪异模式使用在IE6中会多出50像素的顶部元素高。</span></p>
        </div>
    </div>
    <!--Iframe Test-->
    <!--非跨域iframe自适应-->
    <h2>非跨域Iframe高度自适应测试：</h2>
    <div class="iframeBlock">
    <iframe id="iframeMain" scrolling="no" onload="autoHeight()" height="100" src="iframe.html"></iframe>
    </div>
    </body>
    </html>
      

  2.   

    这个是我刚刚做过一个上下两栏自适应和iframe的自适应例子你可以看看不懂的在问我这个iframe导入的iframe.html页面 你自己随便新建个