<?xml version="1.0" encoding="utf-8"?> <!--- - - - - - - - - - - - - - - - - - - - - - - - - * @author:Frost.Yen * @E-mail:871979853@qq.com * @create: 2016-6-1 上午11:37:00 - - - - - - - - - - - - - - - - - - - - - - - - - - --> <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" minWidth="955" minHeight="600" backgroundAlpha="0" xmlns:ns="http://code.google.com/p/flex-iframe/"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.controls.Alert; protected function showIFrameHandler(event:MouseEvent):void { layer(1); } protected function btn_clickHandler(event:MouseEvent):void { layer(-1); Alert.show("test iframe alert !"); } /** * 设置IFrame的层级 * @param index (1表示最上层,-1表示最下层) */ protected function layer(index:int):void { ExternalInterface.call("eval", "(function(){document.getElementById('iframe00').style.zIndex='"+index+"';})()"); } ]]> </fx:Script> <fx:Declarations> <!-- 将非可视元素(例如服务、值对象)放在此处 --> </fx:Declarations> <s:Button id="btn" label="click me" click="btn_clickHandler(event)"/> <s:Panel id="panel" title="flex嵌入html页面" width="80%" height="80%" backgroundAlpha="0" mouseOver="showIFrameHandler(event)"> <ns:IFrame id="iframe0" width="100%" height="100%" source="http://www.yanzimen.com"> </ns:IFrame> </s:Panel> </s:Application>
普遍认为,iframe是动态显示导致iframe始终在最高层,遮挡住弹出框,解决此问题要注意以下几点:
1、当需要显示弹出框时,将iframe置于最底层,即zIndex设为-1,当不需要显示弹出框时,可将iframe至于顶层,即zIndex设为1;
2、必须将每个组件的backgroundAlpha属性值设为0,因为Iframe会被Flex编译出来的swf所覆盖,所以需要把Flex的背景设置为透明,才能显示出来;
3、需要在index.template.html中添加 params.wmode = "transparent";字段,此项防止点击flex组件时,iframe消失的问题。
4、document.getElementById('iframe00').style.zIndex中的iframe00是flex标签中IFrame 的id+"0"的组合,在google的源代码中会给这个Id加上一个序列,这个iframe00也就是显示出来的iframe的div的ID。