让iframe根据内容自动调整高度而不使用滚动条？

javascript html iframe height scrollbar

2022-08-29 22:41:56

例如：

<iframe name="Stack" src="http://stackoverflow.com/" width="740"
        frameborder="0" scrolling="no" id="iframe"> ...
</iframe>

我希望它能够根据里面的内容调整其高度，而无需使用滚动。

答案 1

将其添加到您的版块：<head>

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

并将您的 iframe 更改为：

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

答案 2

您可以使用此库，它最初可以正确调整 iframe 的大小，还可以通过检测 iframe 内容的大小何时发生变化（通过定期签入 a 或通过）并调整其大小来使其保持在正确的大小。setIntervalMutationObserver

他们也是一个 React 版本。

这适用于跨域 iframe 和相同的域 iframe。