您的位置:

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 内部的事件监听等等。希望本文对大家有所帮助。