iframeの高さをレスポンシブで自動調整してスクロールさせないようにする方法

著者:牧野健人

iframeの高さを、フレーム内のコンテンツの高さと合わせることでスクロールさせないようにし、なおかつウィンドウサイズが変わってもレスポンシブで高さを自動調整する方法を解説します。

コードはコピペOKなので、ご活用ください。

牧野健人

記事の著者牧野健人

株式会社リラクス 代表取締役。CRO・SEOを専門とし、デザイン・実装のスキルも活かしながら、クライアントの成果向上のための取組に尽力。
慶應義塾大学卒業後、行政機関を経て、デジタルマーケティングエージェンシーのアイレップにて運用型広告のクリエイティブプランニングに従事。2019年にリラクスを創業。

お問い合わせはフォームよりお願いいたします。

iframeの高さをレスポンシブで自動調整してスクロールさせないようにする方法

ページを開いたりウィンドウサイズを変更した際に、その状態でのiframe内のコンテンツの高さを取得してiframeのheightを動的に書き換えます。

それをおこなうにはiframeの中のページ（子フレーム）とiframeを埋め込むページ（親フレーム）のそれぞれにJavaScriptを記述します。

iframeのHTML

<iframe id="resizableIframe" src="URL" scrolling="no" style="width: 100%;"></iframe>

HTMLのポイントは下記の通りです。

子フレームに書くJavaScript

const postIframeHeight = () => {
    const height = document.documentElement.offsetHeight;
    window.parent.postMessage({ iframeHeight: height }, 'https://example.com'); // https://example.comはiframeを埋め込むサイトのオリジンに置き換える
};

window.addEventListener('DOMContentLoaded', () => {
    postIframeHeight();
});

window.addEventListener('resize', () => {
    postIframeHeight();
});

3行目の'https://example.com'はiframeを埋め込むサイトのオリジンを指定する部分なので、あなたのサイトの情報に置き換えてください。

オリジンはプロトコル（https:// or http://）とホスト（example.com）とポート（443や80）からなりますが、ポートはデフォルトだとhttpsなら443、httpなら80になり、その場合は省略可能です。そのため、今回の例で言うと、トップページのURLを使えば大丈夫なケースがほとんどでしょう。

コードの説明としては、postIframeHeight関数でiframeの中に入れるページの高さ（offsetHeight）を取得し、それを親フレームに送信しています。

その関数を、ページが読み込まれたとき（DOMContentLoaded）と、ページが開かれたままでウィンドウサイズが変わったとき（resize）に呼び出しています。

親フレームに書くJavaScript

window.addEventListener('message', (e) => {
    if (e.data.hasOwnProperty('iframeHeight')) { 
        const iframe = document.getElementById('resizableIframe'); // resizableIframeはiframeのID名に置き換える
        iframe.style.height = `${e.data.iframeHeight}px`;
    }
});

子フレームから受け取ったデータに基づきiframeの高さを調整しています。

eは受け取ったメッセージのイベントオブジェクトなので、そこに'iframeHeight'プロパティがあるかを確認した上で、あればiframeのスタイルのheightとして差し込みます。

'resizableIframe'は高さを自動調整するiframeのID名なので、あなたのページ使うものに書き換えてください。

iframeの高さをレスポンシブで自動調整するデモ

以下に、上述したコードを実際に使用したデモを掲載します。

中のページの高さに応じてiframeの高さが自動調整され、スクロールは発生しません。ウィンドウサイズを変換した場合も高さが再取得されてフレームの高さが調整されます。

WebサイトのCV数を増やしたいなら無料相談 / お問い合わせ