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

javascript html iframe adjustment

2022-08-29 23:32:09

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

答案 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>

答案 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>