html之小积累-.-iframe自适应高度_html/css_WEB-ITnose
方案1:当遇到iframe里面嵌套的页面(后面简称内页),内页的高度不会变化,就是只是第一次加载的时候需要自适应的话,只要设置iframe就行了,兼容ie6+、谷歌。
eg:
方案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的自适应高度解决方案,欢迎给我留言,一起交流,一起进步!
推荐阅读
-
html iframe高度自适应
-
微信小程序、html、css设置内容最小高度,超出自适应(自动延长)
-
iframe高度自适应内容_html/css_WEB-ITnose
-
DIV+CSS自适应窗口高度_html/css_WEB-ITnose
-
Div + CSS高度自适应解决方法_html/css_WEB-ITnose
-
DIV+CSS自适应窗口高度_html/css_WEB-ITnose
-
iframe跨域高度自适应_html/css_WEB-ITnose
-
父页面iframe高度自动适应子页面iframe高度_html/css_WEB-ITnose
-
iframe自适应高度_html/css_WEB-ITnose
-
div模拟textarea自适应高度_html/css_WEB-ITnose