调整iframe的宽度以适合其中的内容 [英] Adjust width height of iframe to fit with content in it

问题描述

我需要一个解决方案来自动调整iframe的宽度和高度，使其几乎不符合其内容。重点是宽度和高度可以在iframe加载后更改。我想我需要一个事件动作来处理iframe中包含的主体维度的变化。

< 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）;

//或者调整所有iframe的大小：
var iframes = document.querySelectorAll（iframe）;
for（var i = 0; i < iframes.length; i ++）{
resizeIFrameToFitContent（iframes [i]）;
}
}）;

< / script>

< iframe src =usagelogs / default.aspxid =iFrame1>< / iframe>


I need a solution for auto-adjusting the width and height of an iframe to barely fit its content. The point is that the width and height can be changed after the iframe has been loaded. I guess I need an event action to deal with the change in dimensions of the body contained in the iframe.

解决方案

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

这篇关于调整iframe的宽度以适合其中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！