[Flex] IFrame系列 —— 嵌入html后Alert弹出窗口被IFrame遮挡问题

Posted 2020-07-19 浮生若夢♬為歡幾何

<?xml version="1.0" encoding="utf-8"?>
<!--- - - - - - - - - - - - - - - - - - - - - - - - -
* @author:Frost.Yen
* @E-mail:[email protected]
* @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。