コンテンツに応じたiframeの高さ自動調整 – 革新的な解決策
HTMLで
親ページに下記 JavaScript コードを追加してください。
<script>
function adjustIframeHeight() {
const iframe = document.getElementById('myFrame');
if (iframe) {
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
}
</script>
<iframe id="myFrame" src="iframe-content.html" onload="adjustIframeHeight()"></iframe>
上記コードでは、<iframe>のid属性がmyFrameに設定され、ロードするコンテンツがiframe-content.html ファイルにあると想定しています。
iframeに埋め込まれたコンテンツページ(iframe-content.html)に以下のJavaScriptを追加してください。
<script>
window.addEventListener('DOMContentLoaded', function() {
parent.adjustIframeHeight();
});
</script>
このコードは、iframe のコンテンツの読み込みが完了したら、parent.adjustIframeHeight() メソッドを通じて親ページに通知し、iframe の高さを再計算して調整します。
上記の手順が完了すると、iframe内の内容が変わったり、新しいコンテンツが読み込まれると、自動的にiframeの高さが内容に合わせて調整されます。
クロスドメインの iframe コンテンツはブラウザのセキュリティポリシーにより、この方法では高さを自動調整できない場合があります。その場合は、postMessage を使用したクロスドメイン通信や iframe 高さの動的調整など、別の方法を検討する必要があります。