html之小积累-.-iframe自适应高度
浏览数：25 /
时间：2015年06月09日
在做系统框架的时候，常常会用到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的自适应高度解决方案，欢迎给我留言，一起交流，一起进步！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
