iframeの高さを自動で調節する方法（別サイトのiframeにも対応）

iframeで別サイトのコンテンツを表示させる時に、iframeに高さを指定するのが一般的ですが、こうした場合「別サイトのコンテンツの高さ」が「指定した高さ」を上回る場合、スクロールバーが出てしまいます。

できれば、スクロールバーは出さずに、コンテンツの高さに応じてiframeの高さも変わってほしいですね。

今回は、iframeの高さをコンテンツの高さに応じて自動調整する方法を紹介します。

この方法は、「iframeを使うページ」と「呼び出し元のページ」のドメインが違っても（クロスドメイン）大丈夫です。但し、呼び出し元のページのコードを触る必要があります。

サンプルコード

iframeを使うページ

<iframe id="parentframe" src="呼び出し元ページのURL" frameborder="no" scrolling="no"></iframe>

<script>
window.addEventListener('message', function(_ev){
  const elmIframe = document.querySelector('#parentframe');
  elmIframe.style.height = _ev.data + 'px';
});
</script>

呼び出し元のページ

<script>
window.addEventListener('message', (_ev) => {
  const elmIframe = document.querySelector('#parentframe');
  elmIframe.style.height = _ev.data + 'px';
});
</script>

解説

呼び出し元のページでは、ページ全体の高さの値をpostMessageメソッドに引数で与えて実行します。

postMessageメソッドの第二引数には、呼び出すページのURLを指定するのが推奨されています。

// URLを指定
postMessage('値', 'https://foo.com')

// URLを指定しない場合はアスタリスク
postMessage('値', '*')

postMessageメソッドを実行すると、iframeを使うページのmessageイベントで先程の値を取得できるようになります。

messageイベントの第一引数のdataプロパティで取得できます（サンプルコードでは_ev.dataの箇所）。

呼び出し元のページの高さの数値を取得したら、それをiframeの高さに反映させます（サンプルコードではelmIframe.style.height = _ev.data + 'px';の箇所）。