【JavaScript】iframeのサイズを変更する

【JavaScript】iframeのサイズを変更する

iframeの子ページでレイアウトが変更された際などに、自分自身を表示するiframeのサイズを変更したい場合があるかと思います。

親と子のドメインが同じであれば簡単に実装できるようなので、メモです。

function iframeSizeSetting(){

    var frame;
    var height;

    // 親からiframeを取得する
    frame = window.top.document.getElementById('TargetIframe');

    // iframeの内部の高さを取得する
    height = frame.contentWindow.document.documentElement.scrollHeight;

    // iframeの高さを調整する
    $(frame).height(height);
}

親windowのdocumentから自分を表示しているiframeを取得します。

そのiframeの中身の高さを取得し、iframeに設定するだけですね。

クロスドメインの場合、高さを取得できない場合がほとんどなので注意が必要です。