当文档改变大小时，调整iframe的大小

Resizing iframe when document changes size

本文关键字：iframe 调整 小时 文档 改变      更新时间：2023-09-26

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

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

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

为iframe窗口触发了大小调整事件。你可以听他们(在iframe本身)，然后触发一些函数在父窗口传播新的大小和更新父窗口的iframe的大小。

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

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

但是当用户展开手风琴时，你可以简单地在父类上调用一个方法，将手风琴的新大小传递给它。

我找到了一个可能的，但不是理想的解决方案，它并不是在所有浏览器中工作:

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

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

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

如果你使用jQuery ui，那么你可以使用事件change和调用函数

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

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