您的当前位置：首页 html之小积累-.-iframe自适应高度_html/css

html之小积累-.-iframe自适应高度_html/css

来源：调星娱乐

　　在做系统框架的时候，常常会用到iframe，当需求是iframe不能出现纵向滚动条，需要根据加载页面的高度，一致延伸，但是iframe的高度自适应问题比较麻烦，当时也是纠结了好久。

　　方案1：当遇到iframe里面嵌套的页面（后面简称内页），内页的高度不会变化，就是只是第一次加载的时候需要自适应的话，只要设置iframe就行了，兼容ie6+、谷歌。

　　eg:" id="iframe_content" onload="this.height=iframe_content.document.body.scrollHeight" class="iframe-content" name="iframe_content" frameborder="0" width="915" height="100%" scrolling="no" >

　　方案2：如果遇到情况比较恶心，在第一次加载完iframe的高度后，内页的高度还是会变动，这个时候，只有去实时去监听内页的高度，如果内页的高度改了，再通过js重新设置iframe的高度。

　　eg:

　　　　function setHeight() {

　　　　　　var iframe = document.getElementById("iframe_content");
　　　　　　try {
　　　　　　　　　var aHeight = iframe.contentWindow.document.body.scrollHeight;
　　　　　　　　　var bHeight = iframe.contentWindow.document.documentElement.scrollHeight;
　　　　　　　　　var height = Math.min(aHeight, bHeight);//取最高值;
　　　　　　　　　iframe.height = height;
　　　　　　} catch (e) {}
　　　　}
　　　　window.setInterval("setHeight()", 200);

　　总结：其实方案1的原理是在加载内页的时候将高度计算出来，再设置iframe的高度。方案2就是需要去监听内页，再设置iframe的高度。当然，还是建议大家能不用iframe，就不用iframe。如果有更好的iframe的自适应高度解决方案，欢迎给我留言，一起交流，一起进步！