前提条件

ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームとします。

子フレームのソースコード

CSS

1. iframe内でコンテンツがスクロールしないようにbodyに「overflow: hidden;」を指定する。

JavaScript

1. ページの高さを取得。
2. parent.postMessage()メソッドを使って高さを親フレームに送信。
3. このスクリプトをコンテンツが全て読み込まれた後の</body>タグの直前に設置。
4. parent.postMessage(h, "*")の「*」の所に親フレームのURI（例: https://TEST.com）を指定（しなくても動作する）

親フレームのソースコード

HTML

1. iframeでコンテンツを読み込みます。
2. postMessage()をサポートしないブラウザ用にコンテンツの高さの最高値をheight属性に入れる。

JavaScript

1. addEventListener()で子フレームからのメッセージを受け取る。
2. document.getElementById('content-frame').heightで、メッセージで送られてきた高さ（e.data）を設定。