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