[Flex] IFrame系列 —— IFrame嵌入html后Alert彈出窗口被IFrame遮擋問題

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