iframeの自動リサイズ方法

JavaScriptを使用する方法: 以下のスクリプトを使用して、iframeの高さを自動的に調整することができます。

<script>
function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>

このスクリプトを以下のように使用します。

<iframe src="example.com" onload="resizeIframe(this)" scrolling="no"></iframe>

この方法では、iframe内のコンテンツがロードされた後にiframeの高さが自動的に調整されます。

jQueryを使用する方法: jQueryを使用すると、さらに簡単にiframeを自動リサイズできます。以下のスクリプトを使用します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('iframe').on('load', function() {
    $(this).height($(this).contents().height());
  });
});
</script>

このスクリプトをHTMLの<head>セクション内に追加します。

<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $('iframe').on('load', function() {
    $(this).height($(this).contents().height());
  });
});
</script>
</head>

この方法では、全てのiframeが自動的にリサイズされます。