[解決済み] jquery get height of iframe content when loaded (ロードされたときの iframe コンテンツの高さを取得する)

質問

help.phpというヘルプページがあり、main.phpのiframe内に読み込まれています。 このページがiframeに読み込まれたら、どのようにして高さを取得することができますか？

私はiframeの高さを100％またはautoにスタイルすることができないので、これを尋ねています。そのため、私はjavascriptを使用する必要があると思います。 私はjQueryを使用しています。

CSSを使用しています。

body {
    margin: 0;
    padding: 0;
}
.container {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    background: silver;
}
.help-div {
    display: none;
    width: 850px;
    height: 100%;
    position: absolute;
    top: 100px;
    background: orange;
}
#help-frame {
    width: 100%;
    height: auto;
    margin:0;
    padding:0;
}

JSです。

$(document).ready(function () {
    $("a.open-help").click(function () {
        $(".help-div").show();
        return false;
    })
})

HTMLです。

<div class='container'>
    <!-- -->
    <div class='help-div'>
        <p>This is a div with an iframe loading the help page</p>
        <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
    </div>  <a class="open-help" href="#">open Help in iFrame</a>

    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
</div>

どのように解決するのですか？

OK 私は最終的に良い解決策を見つけました。

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

一部のブラウザ（古いSafariやOpera）では、CSSのレンダリング前にonloadが完了したと報告するため、マイクロタイムアウトを設定し、iframeのsrcを空白にして再割り当てする必要があります。

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}