Question

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

有可能，你必须让你的一个手风琴来获得所执行动画的步骤事件。

我创建了一个动画框。如果框变大或变小，步骤事件将调用 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无法扩展。它们必须具有固定的宽度和宽度。高度。

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

3 个答案: