実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
![iframeの高さをJavaScriptで自動的に調整する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/aca65a93ef8fae82bee1eda00574cf37a03b45e0/height=288;version=1;width=512/https%3A%2F%2Fparashuto.com%2Frriver%2Fwp%2Fwp-content%2Fuploads%2F2017%2F11%2Fpostmessage-diagram-complete.png)