在文档更改大小时调整iframe的大小

Question

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

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

我很欣赏一般的解决方案，因为我不完全了解iframe的内容，但我可以在其中包含通用脚本。

Answer 1

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

Answer 2

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

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

但是当用户扩展手风琴时，你可以简单地在父母上调用一个方法，然后传递手风琴的新大小。

Answer 3

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

setHeight

http://jqueryui.com/demos/accordion/

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

Answer 4

我发现了一种可能但不理想的解决方案，并且它并不适用于所有浏览器：

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

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

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