文档更改大小时调整 iframe 大小答案

【问题标题】：Resizing iframe when document changes size文档更改大小时调整 iframe 大小
【发布时间】：2011-11-08 05:24:37
【问题描述】：

我有一个网页，其中一个应用程序在 iframe（同一域）中运行。 iframe 的高度根据 iframed 文档的高度在加载时设置。问题是当 iframed 文档的大小发生变化时（通过展开手风琴、菜单等）。发生这种情况时是否会触发任何事件，我可以使用这些事件来相应地调整 iframe 元素的大小？

我已尝试绑定到 iframe 中窗口对象上的 resize 事件，但由于文档内容更改时未调整窗口大小，因此不会触发该事件。我需要的是文档对象上的某种调整大小事件，但据我所知，没有这样的事情。还有其他方法可以检测文档高度的变化吗？

我希望有一个通用的解决方案，因为我不确切知道 iframe 的内容，但我可以在其中包含通用脚本。

【问题讨论】：

【解决方案1】：

为 iframe 窗口触发了调整大小事件。您可以（在 iframe 本身中）收听它们，然后在父窗口中触发某些函数来传播新大小并更新父窗口中的 iframe 大小。

【讨论】：

【解决方案2】：

您是否尝试过使用scroll 事件并将其附加到 iFrame 的 contentWindow 中？

否则，我宁愿建议您直接挂接到手风琴，而不是依靠捕获可能发生或可能不会发生的滚动事件。因为滚动只会在用户实际滚动滑块时触发，而不是在手风琴展开时触发..

但是当用户展开手风琴时，您可以简单地调用父级上的方法，并将手风琴的新尺寸传递给它。

【讨论】：

【解决方案3】：

我找到了一个可能但并不理想的解决方案，它并不适用于所有浏览器：

通过在iframe中绑定body元素的DOMSubtreeModified，我可以在parent或top中找到iframe元素并改变它的高度。

$('body').bind('DOMSubtreeModified', function(){
    top.document.getElementById('appFrame').height = $(document).height();
});

以下是浏览器对此事件的支持概述： http://www.quirksmode.org/dom/events/

【讨论】：

【解决方案4】：

如果您使用的是 jQuery ui，那么您可以使用事件 change 并调用函数

setHeight

function setHeight() {
    parent.document.getElementById('the-iframe-id').height = document['body'].offsetHeight;
}

【讨论】：