iframe根据内容自适应高度的实现

在前端开发中，iframe 经常被用来实现异步加载内容以及跨域资源共享等功能，但是如果 iframe 内容高度不确定，就可能会出现 iframe 页面滚动不完整的问题，影响用户体验。针对这个问题，我们可以通过一些技巧，实现 iframe 根据其内容自适应高度的目的。

一、设置 iframe 高度

在 iframe 没有设置高度时，其默认高度是 150 像素。我们可以通过 CSS 属性设置 iframe 高度为 100% 实现全屏显示，但是这样设置后，iframe 页面会超出父级元素的高度。

二、使用 JS 获取 iframe 内容高度

<iframe id="myIframe" src="https://www.example.com"></iframe>
<script>
  var iframe = document.getElementById("myIframe");
  var height = iframe.contentWindow.document.documentElement.scrollHeight;
</script>

当我们在父级页面中通过 JS 获取 iframe 页面中的内容高度时，无法直接访问 iframe 内部的 DOM 元素。这是因为安全限制，浏览器不允许我们访问其他域名的页面。

解决方案是使用 contentWindow 属性来间接访问 iframe 内部的 DOM。通过 contentWindow.document访问iframe 页面内部的 DOM，再获取其高度。

上面的代码中，我们使用 document.documentElement.scrollHeight 获取到了 iframe 内容的滚动高度。

三、设置 iframe 高度为内容高度

<iframe id="myIframe" src="https://www.example.com" onload="iframeLoaded()"></iframe>
<script>
  function iframeLoaded() {
    var iframe = document.getElementById("myIframe");
    var height = iframe.contentWindow.document.documentElement.scrollHeight;
    iframe.style.height = height + "px";
  }
</script>

我们通过上一步获取到了 iframe 内容的高度，现在我们只需要将 iframe 元素的高度设置为获取到的高度值即可。

但是，直接在 JS 中设置 iframe 的高度时，会出现一闪一闪的效果，因为内容高度会在加载完后才会获取到，设置高度不是瞬间完成的。为了避免这个问题，我们可以使用 onload 事件，在 iframe 加载完成后再设置高度。

四、动态更新 iframe 高度

<iframe id="myIframe" src="https://www.example.com" onload="iframeLoaded()"></iframe>
<script>
  function iframeLoaded() {
    var iframe = document.getElementById("myIframe");
    var height = iframe.contentWindow.document.documentElement.scrollHeight;
    iframe.style.height = height + "px";
  }
  setInterval("updateIframeHeight()", 200);
  function updateIframeHeight() {
    var iframe = document.getElementById("myIframe");
    var height = iframe.contentWindow.document.documentElement.scrollHeight;
    iframe.style.height = height + "px";
  }
</script>

在某些情况下，iframe 内容的高度可能会发生动态变化，例如输入框随着输入内容的变化扩张。此时，我们需要动态获取 iframe 的高度，并重新设置 iframe 的高度。

我们可以使用 setInterval 来定时获取 iframe 的高度，并更新内容高度。在这里，我们设定 200 毫秒的间隔，用于获取 iframe 的高度并更新。

五、小结

通过上述技巧，我们可以轻松地实现 iframe 根据内容自适应高度的效果。然而，在使用 iframe 时，我们也需要注意到一些潜在的问题，例如跨域访问，iframe 内部的事件监听等等。希望本文对大家有所帮助。