外界与Flex Application的交互处理（之嵌入html）

Flex采用IFrame嵌入html，可参考http://www.deitte.com/archives/2006/08/finally_updated.htm，这是Brian Deitte写的一个IFrame Control对象，非常好用。但在实际应用中，还会有一些问题，需要在外围解决。

 

（1）使用IFrame可能碰到的问题：不能随着窗口的位移或调整自动调整。

 

         我是在Popup的TitleWindow中，采用TabNavigator动态载入一些Tab，这些Tab页可能是Flex Container，也可能是IFrame Control（也就是嵌入的iframe中html页面）。因为是扩展出的TitleWindow，允许调整大小和位移，但在调整大小和位移过程中，会造成 IFrame 中的html页面不跟随移动。

         这个问题就必须额外监控mouse事件，刷新IFrame的invalidateDisplayList。

 

 

 

view plain copy to clipboard print ?

1. override protected function oMouseUp(event:MouseEvent):void{   
2.     super.oMouseUp( event );   
3.         //cacheIFrameTabPanels是索引的当前TabNavigator中所有IFrame对象   
4.     for each(var panel:IFrame in cacheIFrameTabPanels){   
5.         Container(panel).invalidateDisplayList();   
6.     }     
7. }  

override protected function oMouseUp(event:MouseEvent):void{ super.oMouseUp( event ); //cacheIFrameTabPanels是索引的当前TabNavigator中所有IFrame对象 for each(var panel:IFrame in cacheIFrameTabPanels){ Container(panel).invalidateDisplayList(); } }

 

 

（2）使用IFrame可能碰到的问题：Tab切换多次后，造成html页面悬浮，不切换。

          这时候，必须额外监控tabnavigator的change事件，将IFrame设置visible为false，（实际上就隐藏iframe中的html页面）。

 

view plain copy to clipboard print ?

1. protected function checkIFrameTabPaneVisible(event:IndexChangedEvent):void{   
2.     var panel:DisplayObject = nav.getChildAt( nav.selectedIndex );   
3.         for each(var panel1:IFrame in cacheIFrameTabPanels){   
4.         Container(panel1).visible = false;   
5.     }    
6.     if(panel is IFrame){   
7.         Container(panel).visible = true;   
8.     }   
9. }  

protected function checkIFrameTabPaneVisible(event:IndexChangedEvent):void{ var panel:DisplayObject = nav.getChildAt( nav.selectedIndex ); for each(var panel1:IFrame in cacheIFrameTabPanels){ Container(panel1).visible = false; } if(panel is IFrame){ Container(panel).visible = true; } }

 

 

（3）使用IFrame可能碰到的问题：Popup的TitleWindow关闭后，html页面仍悬浮。

             这个就简单多了，监听TitleWindow的close事件，将相应的IFrame visible设置为false即可。

 

（4）IFrame并没有对嵌入的iframe和html做回收，这个需要自己扩展。

          IFrame中只是采用了visible来隐藏和显示iframe的内容。所以在实际应用中，需要对一些操作做回收，这个需要自己扩展。

 

view plain copy to clipboard print ?

1. <mx:TabNavigator id="nav" dropShadowEnabled="true" width="98%" height="100%" horizontalGap="0" change="checkIFrameTabPaneVisible(event)"/>  

<mx:TabNavigator id="nav" dropShadowEnabled="true" width="98%" height="100%" horizontalGap="0" change="checkIFrameTabPaneVisible(event)"/>