Flex IFrame 组件未在可视区域之外渲染

Question

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

<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 的经验，仅供参考，但一般来说，您可以使组件的大小无效或使显示列表无效，然后立即调用验证以强制 LayoutManager 重新计算元素及其子元素的大小（或者简单地绘制在使显示列表无效的情况下）：

我在这里看到的困难部分是弄清楚您到底希望什么时候发生（即从滚动条捕获某种事件）。出于测试目的，您可以创建一个按钮，并在其单击处理程序中执行以下操作：

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

如果成功，那么您只需要从 Scroller 或 Canvas 中找到适当的事件，告诉您何时发生滚动（最坏的情况下您可以捕获鼠标）向下标记一个标志，然后捕获 mouseMove，如果设置了该标志，则运行代码以使其无效/重新验证）。基本上，布局/绘图的工作原理是 UIComponent 有标志，让其知道何时需要重新计算某些内容的大小或重新绘制它，这样，所有内容并不总是只重绘那些需要它的组件。在这种情况下，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&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" width="450" height="80"/>
        </mx:Canvas>
    </mx:HBox>
</mx:Application>

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

肖恩