iframeの高さをレスポンシブで自動調整してスクロールさせないようにする方法
iframeの高さを、フレーム内のコンテンツの高さと合わせることでスクロールさせないようにし、なおかつウィンドウサイズが変わってもレスポンシブで高さを自動調整する方法を解説します。
コードはコピペOKなので、ご活用ください。
目次
iframeの高さをレスポンシブで自動調整してスクロールさせないようにする方法
ページを開いたりウィンドウサイズを変更した際に、その状態でのiframe内のコンテンツの高さを取得してiframeのheightを動的に書き換えます。
それをおこなうにはiframeの中のページ（子フレーム）とiframeを埋め込むページ（親フレーム）のそれぞれにJavaScriptを記述します。
iframeのHTML
<iframe id="resizableIframe" src="URL" scrolling="no" style="width: 100%;"></iframe>HTMLのポイントは下記の通りです。
- JavaScriptでこのiframeを取得するためのIDを記述
- スクロールさせないように
scrolling="no"を記述 - iframeそのものの幅が親要素に対してレスポンシブになるように
width: 100%;を記述
子フレームに書く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の高さが自動調整され、スクロールは発生しません。ウィンドウサイズを変換した場合も高さが再取得されてフレームの高さが調整されます。