<iframe>高度自适应的方法

最新推荐文章于 2022-09-17 18:13:28 发布

转载最新推荐文章于 2022-09-17 18:13:28 发布 · 187 阅读

前端技术专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种实现iframe内容宽度变化时高度自适应的方法。通过设置iframe的onload事件来获取内部文档的实际高度，并调整iframe的高度以适应内容的变化。此方案适用于需要实时调整iframe高度的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容宽度变化的iframe高度自适应

<iframe src="backtop.html" frameborder="0" scrolling="no" id="test" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("test");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>

参考链接： http://caibaojian.com/iframe-adjust-content-height.html