iframe の高さを中身に合わせる

html の iframe 要素の高さを iframe の中身の高さに一致させ、iframe のスクロールバーを出さなくても全部表示されるようにする、という話。

javascript を使えば出来るらしい。

例えば、
jquery-iframe-auto-height
というのがあって、JQuery のプラグインになっている。

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script>

$('iframe').iframeAutoHeight();

やってみると、IE8では動かない。いや、ヘッダの中で記述すると最初の読み込み時には動作しなくて、リロードしたときに動作する。そしてボディの iframe の後に記述すると最初の読み込み時から動作する。Firefox7 はどっちに書いても動作する。

<html>
<head>
(略)
<script>
$(document).ready(function () {
$('iframe').iframeAutoHeight();
});
</script>
</head>

<body>
(略)
<iframe src="my_iframe.html" scrolling="no" frameborder="0"></iframe>
<script>
$('iframe').iframeAutoHeight();
</script>
(略)

iframe の中身の読み込みのタイミングがブラウザ間で異なるのに起因するのかな、と思うのだけれど、イベントとして確実に捕まえるにはどうしたらよいかはわからない。