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

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