【JS】<iframe>の高さを引用先ページの高さに自動調節（同一ドメイン）

<iframe>タグを用いると、一つのWebページに別のHTMLページを埋め込むことができます。他のサイトはもちろん、Youtube動画やGoogleマップなどを表示することもできます。<iframe>は独自のスクロールバーを持ち、埋め込まれたコンテンツを完全に独立した環境で表示するため、外部サイトの一部を安全かつ簡単に組み込むことが可能です。

本ページでは、<iframe>の高さ（height）を引用先ページの高さに揃える方法について紹介します。
親ページ（別サイトを埋め込むページ）にJavaScriptを記述するだけで実装できるので簡単ですが、親ページと引用先ページが同一ドメインである必要があり、利用範囲が限定されているので注意してください。（詳しくは こちら）

実装例とコード

<iframe id="myIframe" src="https://noveblo.com/reference-page/" style="width: 100%;"></iframe>

const myIframe = document.getElementById('myIframe');

myIframe.onload = function() {
  const myIframeDocument = myIframe.contentDocument || myIframe.contentWindow.document;
  myIframe.style.height = myIframeDocument.documentElement.scrollHeight + 'px';
};

実装のポイント

まず<iframe>タグをHTML文書内に配置します。id属性を付与して、後でJavaScriptで操作できるようにします。

<iframe id="myIframe" src="引用先ページのURL" style="width: 100%;"></iframe>

次にJavaScriptを記述します。以下のスクリプトは、<iframe>のロードイベントを監視し、コンテンツの高さを取得して<iframe>の高さを設定します。

const myIframe = document.getElementById('myIframe');

myIframe.onload = function() {
  const myIframeDocument = myIframe.contentDocument || myIframe.contentWindow.document;
  myIframe.style.height = myIframeDocument.documentElement.scrollHeight + 'px';
};

contentDocument: これは比較的新しいプロパティで、<iframe>内のドキュメント（コンテンツ）を直接取得するプロパティです。現代のほとんどのブラウザでサポートされているプロパティですが、古いブラウザでは未対応の場合もあるため、古いブラウザでも機能するcontentWindow.documentも併記しています。