1. ホーム
  2. javascript

[解決済み] iframeの幅と高さをコンテンツに合わせて調整する

2022-03-14 06:21:35

質問

を解決する必要があります。 自動調整 widthheightiframe を使用して、そのコンテンツにかろうじて適合するようにします。ポイントは、幅と高さを変更できるのは 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 );

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