Flex IFrame 组件未呈现在可视区域之外

Question

初学者问题： 我在 Flex 4 中为 Flex 使用 IFrame 组件。下面的代码在将其放在滚动区域的顶部时有效。但是，如果我将它放在可视区域下方的位置，它将不会呈现。我是 Flex 的完全初学者。有趣的是，当我在 HBox 处于视图中时调整窗口大小时，Iframe 将加载。但滚动到它不会。下面是我的代码。我已经确保一切都是可见的=真，但似乎我需要添加一个侦听器或以某种方式欺骗它认为窗口已调整大小以使其呈现。任何人都知道如何解决这个问题？谢谢！

<mx:HBox visible="true" backgroundColor="#cccccc" id="facebookhbox" width="100%" height="100" horizontalAlign="center" verticalAlign="middle" verticalGap="0" verticalScrollPolicy="off">
        <mx:Canvas id="facebookcanvas" visible="true" x="0" y="0" width="650" height="80">
            <flexiframe:IFrame visible="true" y="0" x="0" id="facebookIFrame" source="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.examplelink.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" width="450" height="80"/>
        </mx:Canvas>
    </mx:HBox>

Answer 1

这里没有使用 Flex IFrame 的经验，仅供参考，但一般而言，您可以使组件的大小无效或使显示列表无效，然后立即调用 validate 以强制 LayoutManager 重新计算元素及其子元素的大小（或者干脆在显示列表失效的情况下绘制）：

我在这里看到的困难部分是弄清楚您希望何时发生这种情况（即从滚动条中捕获某种事件）。出于测试目的，您只需创建一个按钮，然后在它的点击处理程序中执行以下操作：

facebookIFrame.invalidateSize();
facebookIFrame.invalidateDisplayList();
facebookIFrame.validateNow();

如果这行得通，那么您只需要从 Scroller 或 Canvas 中找到适当的事件，该事件会告诉您何时发生滚动（最坏的情况是您可以捕获鼠标向下标记标志然后捕获 mouseMove，如果设置了标志然后运行无效/重新验证的代码）。基本上布局/绘图的工作原理是 UIComponents 有标志，让它知道何时需要重新计算某些东西的大小或重绘它，这样所有东西并不总是只重绘那些需要它的组件。在这种情况下，FacebookIFrame 似乎并没有在应该失效的某个时候失效。让我知道我是否可以再提供帮助，或者如果这不起作用。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                height="100%"
                width="100%"
                xmlns:code="http://code.google.com/p/flex-iframe/"
                mouseDown="application1_mouseDownHandler(event)"
                mouseUp="application1_mouseUpHandler(event)"
                mouseMove="application1_mouseMoveHandler(event)">

    <mx:Script>
        <![CDATA[
            var isMouseDown:Boolean;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                facebookIFrame.invalidateSize();
                facebookIFrame.invalidateDisplayList();
                facebookIFrame.validateNow();
            }
            protected function application1_mouseDownHandler(event:MouseEvent):void
            {
                isMouseDown = true;
            }
            protected function application1_mouseUpHandler(event:MouseEvent):void
            {
                isMouseDown = false;
            }
            protected function application1_mouseMoveHandler(event:MouseEvent):void
            {
                if(isMouseDown)
                {
                    facebookIFrame.invalidateSize();
                    facebookIFrame.invalidateDisplayList();
                    facebookIFrame.validateNow();
                }
            }
        ]]>
    </mx:Script>

    <mx:Spacer height="1000"/>
    <mx:Button label="Test Invalidation"
               click="button1_clickHandler(event)"/>
    <mx:HBox visible="true" backgroundColor="#cccccc" id="facebookhbox" width="100%" height="80" horizontalAlign="center" verticalAlign="middle" verticalGap="0" verticalScrollPolicy="off">
        <mx:Canvas id="facebookcanvas" visible="true" x="0" y="0" width="650" height="80">
            <code:IFrame visible="true" y="0" x="0" id="facebookIFrame" source="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.examplelink.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" width="450" height="80"/>
        </mx:Canvas>
    </mx:HBox>
</mx:Application>

已更新以包含显示示例工作的完整应用程序，这绝不是一种好方法，这是由于 IFrame 代码中的错误应该修复（尽管我不确定如何或在哪里存在的错误应该导致它在不存在的地方适当地失效）。

肖恩