iframeの高さを自動調整する方法は何ですか？

2年 ago
芽依, 雨夜
1 minute

iframeの高さを自動調整するためには、以下のような方法があります。

  1. JavaScriptを使用して動的に高さを調整する：JavaScriptのメソッドを使ってifreme内のコンテンツの実際の高さを取得し、その高さをiframeのheight属性に代入します。
<script>
  function resizeIframe() {
    var iframe = document.getElementById('myIframe');
    var iframeHeight = iframe.contentWindow.document.body.scrollHeight;
    iframe.style.height = iframeHeight + 'px';
  }
</script>

<iframe id="myIframe" src="yourPage.html" onload="resizeIframe()"></iframe>
  1. CSSのcalc()関数を使用する：iframeの高さを100％から固定の高さを引いて計算するために、CSSのcalc()関数を使用してください。
<style>
  #myIframe {
    height: calc(100% - 50px); /* 50px为固定高度 */
  }
</style>

<iframe id="myIframe" src="yourPage.html"></iframe>
  1. jQueryのresize()メソッドを使用すると、iframeの高さを自動的に調整することができます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myIframe').on('load', function() {
      $(this).height($(this).contents().height());
    });
  });
</script>

<iframe id="myIframe" src="yourPage.html"></iframe>
bannerAds