ifrme自动适应宽高

Question

<div>
    <iframe id="myframe" name="myframe" width="100%"
     src="这里放你要放在iframe里的页面" scrolling="no" frameborder="0"
     onload="this.height=100" style="overflow:hidden;">
    </iframe>    <script type="text/javascript">
           function reinitIframe()
           {
               var iframe = document.getElementById("myframe");
               try{
                   var bHeight = iframe.contentWindow.document.body.scrollHeight;
                   var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                   var height = Math.max(bHeight, dHeight);
                   iframe.height =  height;
                   }catch (ex){}
           }
           window.setInterval("reinitIframe()", 200);
       </script>
   </div>我iframe的外层div是没有高度的 也就是根据iframe高度进行调整  问题是这样的 在这个页面里我通过JS改变iframe 的src  加载时候第一个页面是没问题的，但如果加载的第一个页面比改变src的第二个页面的高度要高的话，会出现 第二个页面底部很大距离空出来

Answer 1

<div>
    <iframe id="myframe" name="myframe" width="100%"
     src="这里放你要放在iframe里的页面" scrolling="no" frameborder="0"
     onload="reinitIframe(this)" style="overflow:hidden;">
    </iframe>
 
    <script type="text/javascript">
        function reinitIframe(iframe) {
            //var iframe = document.getElementById("myframe");
            try {
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.max(bHeight, dHeight);
                iframe.style.height = height+'px'/////////////
            } catch (ex) { }
        }
       /////////// window.setInterval("reinitIframe()", 200);
       </script>
   </div>放在onload事件中，只要iframe加载的src没有跨域，可以依据加载页面高度来调整iframe的高度的跨域就没搞了

Answer 2

试试这种方法给iframe的父元素div加一个高度,加一个样式定义div{
overflow-y: auto; 
overflow-x:hidden;
}iframe的高度设成100%

Answer 3

现在问题是 没有跨域调用出现了 高度会出现固定根据iframe出现的最高高度父元素宽度定义了的话，就无法根据iframe的实际高度伸缩了

Answer 4

第一次加载没问题，但是比如说在这个iframe外面有个菜单栏，点击后可以切换iframe的内容，如果第一次的高度比切换后的iframe内容高，那么第二次的底部就会留空，似乎第一次加载的时候就会给iframe父元素一个高度了，而且记录着，如果第二次比他高的话，那可以撑开，但无法缩小

Answer 5

你是想由iframe的高度决定其父元素的高度？

Answer 6

没注意测试。。设置高度前向还原iframe为默认高度就行了。。
<a href="1.html" target="myframe">1.html</a>
<div>
    <iframe id="myframe" name="myframe" width="100%"
     src="1.html" scrolling="no" frameborder="1"
     onload="reinitIframe(this)" style="overflow:hidden;">
    </iframe>
  
    <script type="text/javascript">
        function reinitIframe(iframe) {
            iframe.style.height = 'auto';
            //var iframe = document.getElementById("myframe");
            try {
                var bHeight = iframe.contentWindow.document.body.scrollHeight;
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                var height = Math.max(bHeight, dHeight);
                alert(bHeight+'\n'+dHeight)
                iframe.style.height = height + 'px'/////////////
            } catch (ex) { }
        }
        /////////// window.setInterval("reinitIframe()", 200);
       </script>
   </div>1.html<script>
    var h = 1000 * Math.random()
document.write('<div style="height:'+h+'px">'+h+'</div>')
</script>

Answer 7

你可以在iframe的窗口里调节iframe 和div的大小啊

Answer 8

这段代码我也用过，，刚刚又测试了
没有楼主说的情况啊。
那个空白
是不是 iframe src 那页本身的空白啊？