iframe 根据内容自适应高度-终极解决方案

在HTML中，要让<iframe>根据内容自适应高度，可以使用一种称为"终极解决方案"的技术。这种解决方案使用JavaScript来实现动态调整<iframe>高度的效果。以下是具体的步骤：

1. 在父页面中添加以下JavaScript代码：

<script>
  function adjustIframeHeight() {
    const iframe = document.getElementById('myFrame');
    if (iframe) {
      iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
  }
</script>

2. 在<iframe>标签中添加onload属性，并调用adjustIframeHeight()函数：

<iframe id="myFrame" src="iframe-content.html" onload="adjustIframeHeight()"></iframe>

注意：上述代码中，假设你的<iframe>的id属性设置为myFrame，并且要加载的内容在iframe-content.html文件中。

3. 在被嵌入的iframe内容页（iframe-content.html）中，添加以下JavaScript代码：

<script>
  window.addEventListener('DOMContentLoaded', function() {
    parent.adjustIframeHeight();
  });
</script>

这段代码的作用是在iframe内容加载完毕后，通过parent.adjustIframeHeight()方法通知父页面重新计算和调整iframe的高度。

完成上述步骤后，当iframe内容发生变化或加载新内容时，会自动调整iframe的高度以适应内容。

请注意，在某些情况下，由于浏览器的安全策略限制，跨域的iframe内容可能无法通过此方法自适应高度。在这种情况下，你可能需要考虑使用其他技术，如使用postMessage来进行跨域通信，并动态调整iframe高度。