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

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

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

親ページと引用先ページのドメインが異なっても、postMessageを使うことで同様の実装ができます。ただし、引用先ページに特定のスクリプトを記述できることが条件です。詳しくは以下記事にて。

実装例とコード

以下は<iframe>で引用しているページです。
高さは引用先ページの高さに揃うよう、JavaScriptで実装しています。

HTML / JavaScritpt コード
<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も併記しています。

注意点
  • 同一オリジンポリシー: 親ページと引用先ページが同一ドメインである必要があります。異なるドメインの場合、iframe.contentDocumentiframe.contentWindow.documentにアクセスできないため、上述のスクリプトは機能しません。
    • ポリシーを回避して実装する方法も記事にしました(こちら
  • ロード時のみ: この方法は<iframe>が初めて読み込まれた時に高さを調整するものであり、動的にコンテンツが変更される場合には対応できません。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!