iframe高度自适应的方法有哪些

有以下几种方法可以实现iframe的高度自适应：

使用JavaScript动态调整高度：通过JavaScript的方法来获取iframe中内容的实际高度，然后将该高度赋值给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="https://static.jirixiang.com/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png" onload="resizeIframe()"></iframe>

使用CSS的calc()函数：通过CSS的calc()函数来计算iframe的高度，将iframe的高度设置为100%减去固定的高度。

<style>  #myIframe {    height: calc(100% - 50px);   }</style><iframe id="myIframe" src="https://static.jirixiang.com/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png"></iframe>

使用jQuery的resize()方法：通过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="https://static.jirixiang.com/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png"></iframe>