iframe高度自适应问题，请教高手

先设置iframe的height为auto，在设置实际的height值试试ifr.style.height='auto';
ifr.style.height='计算加载的页面得到的内容，记得加单位px';

是同域名的不？
如果是同域名的话，可以在iframe里页面加载完后计算出高度，比如（currentheight），然后通过父级页面的控制iframe高度
比如（parent.document.getElementById("iframe_id").height=currentheight)如果域名不同，之前帮人解决过一个类似问题，我总结了一下，给你参考http://blog.csdn.net/ivyandrich/article/details/24372909

还是不行的，我附代码给你看下：
<body>
    <div id="container">
        <div id="top">
            <iframe name="topFrame" id="topFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="1000" height="100%" src="top.jsp" > </iframe>
        </div>
        <div id="left">
            <iframe name="leftFrame" id="leftFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="175" height="100%" src="left.jsp" > </iframe>
        </div>
        <div id="main">
            <iframe name="mainFrame" id="mainFrame"  scrolling="no" frameborder="0" framespacing="0" border="0" width="100%" height="100%" src="../center/mainPage_mode1.jsp"  onload="resizeFrame2(this)" > </iframe>
        </div>
        <%@include file="../footer.jsp" %>
    </div>
</body>CSS代码如下：
#top {
  width: 1000px;
  height: 115px;
  clear: both;
}
#left {
  width: 190px;
  height: 600px;
  float: left;
}
#main {
  width: 810px;
  height: 100%;
  float: left;
}
#footer {
  width: 100%;
  height: 100%;
  clear:both;
  margin: 20px 0;
}JS如下:
function resizeFrame(){
    var iframe = document.getElementById("mainFrame");
    //var iframe2 = document.getElementById("leftFrame");    try{
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

        var height = Math.min(bHeight, dHeight);

        iframe.height = Math.max(600, height) + 50;
        //iframe2.height = height;

alert("main b:"+bHeight+" d:"+dHeight + " f: "+height);
alert(iframe.height);
    }catch (ex){

    }
    //window.location.reload();
}IE8及ff是没问题的，就是IE6，烦死了。

是同域名的，JS如下：
function resizeFrame(){
    var iframe = document.getElementById("mainFrame");
    //var iframe2 = document.getElementById("leftFrame");    try{
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;

        var height = Math.min(bHeight, dHeight);

        iframe.height = Math.max(600, height) + 50;
        //iframe2.height = height;

alert("main b:"+bHeight+" d:"+dHeight + " f: "+height);
alert(iframe.height);
    }catch (ex){

    }
    //window.location.reload();
}IE6试过很多种方法，都不凑效

我是这么用的，你试试？？？ <iframe style="display: block;" id="frame" src="frame.html" scrolling="no" frameborder="0" width="100%" onload="this.height=document.getElementById('frame').contentWindow.document.body.scrollHeight;"></iframe>

没问题。。   <div id="container">
        <div id="top">
            <iframe name="topFrame" id="topFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="1000" height="100%" src="top.jsp" > </iframe>
        </div>
        <div id="left" style="background:#eee">
            <iframe name="leftFrame" id="leftFrame" scrolling="no" frameborder="0" framespacing="0" border="0" width="175" height="100%" src="left.jsp" > </iframe>
        </div>
        <div id="main" style="border:solid 1px #000">
            <iframe name="mainFrame" id="mainFrame"  scrolling="no" frameborder="0" framespacing="0" border="0" width="100%" height="100%" src="javascript:void(0)"  onload="resizeFrame2(this)" > </iframe>
        </div>
    </div>
<a href="javascript:resizeFrame(1500)">1500px</a>　<a href="javascript:resizeFrame(300)">300px</a>
<style>
#top {
  width: 1000px;
  height: 115px;
  clear: both;
}
#left {
  width: 190px;
  height: 600px;
  float: left;
}
#main {
  width: 810px;
  height: 100%;
  float: left;
}
#footer {
  width: 100%;
  height: 100%;
  clear:both;
  margin: 20px 0;
}</style>
<script>
    function resizeFrame(h) {
        var iframe = document.getElementById("mainFrame");
        //var iframe2 = document.getElementById("leftFrame");        try {
            /////////////////内容模拟
            var doc = iframe.contentWindow.document;
            var div = doc.getElementById('dv');
            if (!div) {
                div = doc.createElement('div');
                div.id = 'dv'
                div.style.border = 'solid 1px black';
                doc.body.appendChild(div);
            }
            div.style.height = h + 'px';            //////////////////////////////////
            iframe.style.height = 'auto'
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;            var height = Math.max(bHeight, dHeight);            iframe.style.height = Math.max(600, height) + 50;
            //iframe2.height = height;            // alert("main b:" + bHeight + " d:" + dHeight + " f: " + height);
            // alert(iframe.height);
        } catch (ex) {        }
        //window.location.reload();
    }
</script>

要在你获取高度前设置 iframe.style.height = 'auto'这句。。获取高度后在设置没意义了

调试易

iframe高度自适应问题，请教高手

解决方案 »