当内容展开时，在 jQuery 动画期间展开 iframe

Question

我正在开发一个用户仪表板项目，用户可以在其中与小部件进行交互（非常类似于 iGoogle 仪表板）。我正在使用 jQueryUI portlet 来保存 iframe。我遇到的问题是，当 iframe 中的内容使用 jQuery 动画展开时，我想实时调整 iframe 的大小。例如，我在 iframe 中有一个自定义手风琴控件。当用户单击面板以展开手风琴时，我调用 slideDown() 函数来显示内容。当 slideDown() 动画完成后，我会根据身体的新高度调整 iframe 的大小。结果是手风琴的内容向下滑动，直到它们在滑动动画期间超出小部件的范围。动画完成后，调整大小会处理新的小部件高度，一切看起来都很好。这是一个非常不稳定的动画，我想调整 iframe 的大小，使其在 slideDown() 动画期间扩展到 iframe 的主体高度。在幻灯片动画期间如何根据 body 高度扩展 iframe？

这是我目前正在使用的代码。

// This code gets fired on an accordion panel click event.
content.slideDown(100, function ()
{
    parent.expandContainer('panel1', $('body').height());
});     

// This code resides in the parent page hosting the iframes.
function expandContainer(elementId, height)
{
    $('#' + elementId).children('.content').find('iframe').css('height', height + 'px');
}   

Answer 1

有可能，您必须制作一个手风琴才能获得所执行动画的step-event。

我创建了一个动画框。如果盒子变大或变小，step-event 调用函数 resizeIframe(height)。 该函数再次调用父文档中的同名函数resizeIframe(height)。试试这个演示：

http://algorhythm.de/tools/resizeable-iframe/index.html

Answer 2

jquery 手风琴在其 API 中有一个事件，当动画完成时触发：

在面板被激活后触发（动画完成后）。 http://api.jqueryui.com/accordion/#event-activate

使用此事件触发 iframe 调整大小对我来说很好。

Answer 3

根据我的研究，iframe 无法扩展。它们必须具有固定的宽度和高度。