Flex中利用IFrame嵌入HTML网页后，出现菜单被遮挡的问题解决办法，包括IFrame别隐藏的问题

准备工作是建立测试工程，sdk4.6，创建一个新的Flex工程，引入flex-iframe-1.5.1.swc，工程样例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
               minWidth="955" minHeight="600" backgroundAlpha="0">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <mx:VBox width="100%" height="100%" backgroundAlpha="0">
        <mx:Canvas id="menuCanvas" width="100%" height="4%" backgroundColor="0x003a39"
                   horizontalScrollPolicy="off" verticalScrollPolicy="off">
            <mx:MenuBar id="menubar" width="100%" height="100%" dataProvider="{xmlList}"
                        styleName="yahei" mouseOver="menubar1_mouseOverHandler(event)"
                        labelField="@label" showRoot="false"/>
        </mx:Canvas>
        
        <mx:TabNavigator id="stnContent" mouseOver="showIFrameHandler(event)"
                         width="100%" backgroundAlpha="0"
                         height="100%">
            
            <mx:Canvas id="test1" label="Google" backgroundAlpha="0.0"  mouseOver="showIFrameHandler(event)"width="100%" height="100%">
                <flexiframe:IFrame id="iframe1" source="http://www.google.co.uk"
                                   width="100%"
                                   height="100%"/>
            </mx:Canvas>           
        </mx:TabNavigator>
    </mx:VBox>
    
    <fx:Script>
        <![CDATA[
            
            [Bindable]
            private var xmlList:XML = <items>
                                            <item label='测试菜单'>
                                                <item label='测试菜单-001'></item>
                                                <item label='测试菜单-002'></item>
                                                <item label='测试菜单-003'></item>
                                                <item label='测试菜单-004'></item>
                                            </item>
                                       </items>;
            
            
            protected function menubar1_mouseOverHandler(event:MouseEvent):void
            {
                if(stnContent.length  > 0)
                {
                    var canvas:Canvas = stnContent.selectedChild as Canvas;
                    canvas.setStyle("backgroundAlpha","0.01");
                    
                    var id:String = (stnContent.selectedChild as Object).id;

                   //该处是当鼠标焦点移出IFrame后，将IFrame层设置到最低层-1.
                    ExternalInterface.call("eval", "(function(){document.getElementById('iframe10').style.zIndex='-1';})()");
                }
            }
            
            private function showIFrameHandler(event:MouseEvent):void
            {
                var canvas:Canvas = stnContent.selectedChild as Canvas;
                canvas.setFocus();
                
                if(stnContent.length  > 0)
                {
                    var id:String = (stnContent.selectedChild as Object).id;

                   //当鼠标焦点又回到IFrame后，再将IFrame的层设置到最上层1.
                    ExternalInterface.call("eval", "(function(){document.getElementById('iframe10').style.zIndex='1';})()");
                }
            }
        ]]>
    </fx:Script>
    
</s:Application>

需要注意几个步骤：

1.先设置鼠标移出去和进来时的IFrame的层级zindex。

2.再就是要将Flex里面的所有上层组件容器设置为背景透明： backgroundAlpha=0。

3.将Flex工程下面的html-template目录下的模板文件index.template.html中的窗口模式修改为transparent模式（params.wmode = "transparent";）。

实现原理：

1、首把Irame的地位，也就是zIndex设置为-1，让他显示在最底层。
2、光设置到最底层是不够的，因为Iframe会被Flex编译出来的swf所覆盖，所以须要把Flex的所有上层容器背景设置为透明，才能显示出来。
3、设置为透明显示出来之后若是想在Iframe长进行操纵还须要添加鼠标事务（在鼠标移到iframe上的时辰把层的zIndex设置为1，分开时设置为-1）。

最后，如果需要参考具体的案例代码，可下载本人上传的样例代码。谢谢。