javascript - 当页面包含 DOM 时，基于内容的 iframe 自动高度不会调整大小

Question

当页面包含 DOM 时，基于内容的 iframe 自动高度不会调整大小

<script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

<iframe src="http://site.com/page.php" frameborder="0" width="995" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true" onload="javascript:resizeIframe(this);"></iframe>

在我发现这个问题之前它工作得很好

其中一个 iframe 网站页面包含 DOM 以隐藏和显示更多文本

当用户点击它时..它将显示更多文本..但 iframe 不会调整大小并且不会显示整个页面

我需要它正常工作

任何人都可以帮忙吗？

谢谢

Answer 1

您需要检测 iFrame 中的 DOM 是否已更改，然后重新计算 IE 框架的大小。最好的方法是使用 MutationObserver。但是，这在 IE10 及更低版本中不起作用，因此您必须使用后备。

看看我的小图书馆，它会为你处理这一切。

https://github.com/davidjbradshaw/iframe-resizer