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

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

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

eg:<iframe src="<c:url value='/role/edit.do'/>" 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" ></iframe> 

方案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的自适应高度解决方案，欢迎给我留言，一起交流，一起进步！