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）。

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