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

Posted 2023-02-23

【中文标题】Flex IFrame 组件未呈现在可视区域之外

【英文标题】：Flex IFrame Component not rendering outside viewable area

【发布时间】：2011-06-21 14:03:05

【问题描述】：

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

<mx:HBox visible="true" backgroundColor="#cccccc" id="facebookhbox"   horizontalAlign="center" verticalAlign="middle" verticalGap="0" verticalScrollPolicy="off">
        <mx:Canvas id="facebookcanvas" visible="true" x="0" y="0"  >
            <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"  />
        </mx:Canvas>
    </mx:HBox>

【参考方案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"
                
                
                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 />
    <mx:Button label="Test Invalidation"
               click="button1_clickHandler(event)"/>
    <mx:HBox visible="true" backgroundColor="#cccccc" id="facebookhbox"   horizontalAlign="center" verticalAlign="middle" verticalGap="0" verticalScrollPolicy="off">
        <mx:Canvas id="facebookcanvas" visible="true" x="0" y="0"  >
            <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"  />
        </mx:Canvas>
    </mx:HBox>
</mx:Application>

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

肖恩

【讨论】：

肖恩，非常感谢您的回复。我现在要尝试所有这些。

@Fotash 当然很高兴我能提供帮助，而且因为你提到了你对 Flex 的新认识，我总是喜欢建议人们在一周内查看 Adob​​e 上的 Flex 视频教程，我不为他们，但我发现这些视频是一个很好的介绍，只是在谷歌周围搜索他们。