调整 iframe 的宽度和高度以适应其中的内容

Question

我需要一个解决方案来 自动调整 width 的 height 和 iframe 以勉强适应其内容。关键是加载 iframe 后可以更改宽度和高度。我想我需要一个事件操作来处理 iframe 中包含的主体尺寸的变化。

原文由 StoneHeart 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<script type="application/javascript">

 function resizeIFrameToFitContent( iFrame ) {

 iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
 iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
 }

 window.addEventListener('DOMContentLoaded', function(e) {

 var iFrame = document.getElementById( 'iFrame1' );
 resizeIFrameToFitContent( iFrame );

 // or, to resize all iframes:
 var iframes = document.querySelectorAll("iframe");
 for( var i = 0; i < iframes.length; i++) {
 resizeIFrameToFitContent( iframes[i] );
 }
 } );

 </script>

 <iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

原文由 Ahmy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

嵌入的单行解决方案：从最小尺寸开始并增加内容尺寸。不需要脚本标签。

 <iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

原文由 Guy 发布，翻译遵循 CC BY-SA 3.0 许可协议