この記事で分かること
iframeの高さ・幅を動的に変更する方法contentWindow/scrollHeightを使った自動リサイズ- 別ドメイン
iframeを安全にリサイズする方法（postMessage） - 実務での注意点とよくある落とし穴
iframe の高さや幅は、読み込むページの内容によって変わるため、状況に応じて動的にリサイズする必要があります。
この記事では、scrollHeight を使った同一オリジンでの自動調整から、別ドメインでの postMessage を使った安全なリサイズ方法まで分かりやすく解説します。
iframe の高さは「中身の高さ」に合わせて変えられる
iframe はデフォルトでは高さが固定のため、
中身のページが長いとスクロールバーが出てしまいます。
そこで、JavaScript を使って
iframe の高さを中身の高さに合わせて自動調整 する方法がよく使われます。
同一オリジンの場合：scrollHeight で高さを取得する
iframe 内のページが同じドメインの場合、
contentWindow / contentDocument を使って高さを取得できます。
const iframe = document.getElementById("myFrame");
iframe.onload = () => {
const doc = iframe.contentDocument;
const height = doc.body.scrollHeight;
iframe.style.height = height + "px";
};
scrollHeight を使うことで、
iframe 内のページの「実際の高さ」を取得できます。
幅（width）を調整する場合
幅も同様に取得できます。
const width = doc.body.scrollWidth;
iframe.style.width = width + "px";
ただし、幅はレスポンシブデザインの都合で
固定せず 100% にするケースが多いです。
別ドメインの場合：postMessage を使う
別ドメインの iframe は
同一オリジン制限 により scrollHeight を取得できません。
そのため、iframe 内のページから
postMessage を使って高さを送ってもらう 方法が一般的です。
① iframe 内のページ（送信側）
const height = document.body.scrollHeight;
window.parent.postMessage({ height }, "*");
② 親ページ（受信側）
window.addEventListener("message", (event) => {
const iframe = document.getElementById("myFrame");
iframe.style.height = event.data.height + "px";
});
この方法なら、
異なるドメインの iframe でも安全にリサイズ できます。
リサイズがうまくいかないときのチェックポイント
iframeの CSS にheightが固定されていないか？iframe内のbodyにmarginが残っていないか？- 読み込み前に高さを取得していないか？（
onload必須） - 別ドメインの場合は
postMessageを使っているか？
実務でよくあるパターン
- 外部サービスの埋め込み（フォーム・チャット・広告）
- ブログパーツの自動リサイズ
- SPA と
iframeの連携
特に外部サービスでは postMessage を使った
双方向リサイズ が一般的です。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
iframeの高さ・幅の自動リサイズを体系的に理解したいscrollHeightやcontentWindowの仕組みを基礎から学びたい- 同一オリジン制限や
postMessageを使った安全な通信を理解したい
iframe のリサイズは、DOM・イベント・同一オリジン制限など
Web の基礎知識が密接に関わるテーマです。
書籍ではこれらの基礎を順序立てて学べるため、
「なぜ scrollHeight が取得できないのか？」
「なぜ別ドメインでは postMessage が必要なのか？」といった
実務で必須の理解が深まります。
いちばんやさしい JavaScript の教本
JavaScript の基本文法から DOM 操作・イベント処理までを丁寧に解説した入門書です。
iframe のリサイズに必要な
「DOM の仕組み」「イベント（onload）」「window / document の関係」など
基礎をしっかり固められます。
この本で解決できること：
contentDocumentやcontentWindowの理解が深まるonloadを使った安全な DOM 操作の基礎が身につく- リサイズ処理に必要な DOM / イベントの基礎が体系的に学べる
確かな力が身につく JavaScript「超」入門
実務で使う JavaScript の考え方をしっかり身につけたい人向けの入門書です。
iframe のリサイズで重要な
「同一オリジン制限」「イベントの流れ」「外部サービスとの連携」など
実務的な視点で理解できます。
この本で解決できること：
scrollHeightを使った DOM の扱い方が理解できる- 別ドメインで
postMessageが必要な理由が分かる - 実務で使う「安全な
iframe連携」の考え方が身につく
動画で理解を深めたい方へ（Udemy講座）
iframe のリサイズは、
「読み込み完了のタイミング」「DOM の高さ取得」「postMessage の通信」など
実際の動きを見ながら学ぶと理解が一気に深まります。
動画では scrollHeight が取得できる瞬間や、
別ドメインでエラーになる理由などを視覚的に確認できます。
初心者のためのJavaScript 完全入門
DOM 操作・イベント処理・window / document の関係など、
iframe リサイズの基礎となる知識を体系的に学べる人気講座です。
この講座で解決できること：
onloadの発火タイミングを視覚的に理解できるscrollHeightの仕組みを実際の画面で確認できる- DOM とイベントの関係を動画で直感的に理解できる
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
外部サービス連携・iframe 通信・postMessage など、
実務で必要な「安全な iframe 連携」を深く理解したい方に最適な講座です。
この講座で解決できること：
- 別ドメイン
iframeのリサイズに必要なpostMessageを実践的に学べる iframeの読み込み完了後の処理フローを理解できる- 実務で使う「外部サービス埋め込み」の考え方が身につく
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
scrollHeightが取得できない原因が分からない- 同一オリジン制限で何ができて何ができないか曖昧
postMessageを使った安全な通信の理解が難しいiframeの読み込みタイミング（onload）の扱いに自信が持てない
スクールでは、プロの講師が
iframe のリサイズや外部サービス連携など、
実務で必須となる知識を体系的に教えてくれます。
特に postMessage を使った安全な通信は
独学だとつまずきやすいため、プロのサポートが大きな助けになります。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
iframeの読み込み・リサイズ・通信の理解を深めるアドバイスがもらえる- 実務で使う外部サービス連携の考え方を学べる
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
iframe の自動リサイズに関するよくある質問（FAQ）
scrollHeight が 0 になるのはなぜですか？
読み込み前にアクセスしている可能性があります。onload 内で取得してください。
別ドメインの iframe の高さを取得できますか？
直接取得はできません。postMessage を使って iframe 側から高さを送る必要があります。
iframe の幅も自動調整できますか？
可能ですが、実務では width:100% を使うケースが多いです。
postMessage の origin は必ず指定すべきですか？
はい。セキュリティのため、受信側で origin チェックを行うことが推奨されます。
まとめ
iframe の高さ・幅を動的に調整するには、
同一オリジンかどうか で方法が変わります。
- 同一オリジン →
scrollHeightで高さ取得 - 別ドメイン →
postMessageで高さを送信
実務では iframe の自動リサイズはよく使われるため、
両方の方法を理解しておくと便利です。
