Flex与Google Iframe弹出框被Iframe遮盖问题解决办法

Flex与Google Iframe弹出框被Iframe遮盖问题解决办法

项目中要用到Flex与Iframe结合，但是在使用的过程中出现了一些问题，Flex Pop出来的窗口都会被Iframe给遮住，在网上找了很多资料但是都没办法完全解决，网上很多都说在pop窗口时把Iframe的visbale设置为false，但是这样的解决办法不是很好，所以在看了google的Iframe原代码后，发现Iframe是被动态显示出来的，也就是说Iframe始终会显示在最上层，那么在发现这个问题之后，想了如下办法：

1、首先把Iframe放到最上层

2、当有弹出窗口时，把Iframe放在最底层，然后背景设成透明

3、关闭弹出窗口时，把Iframe放到最上层

1、修改IFrame.as文件

a. 增加以下方法：



public function indexIFrame(zIndex:int):void {

logger.info("index IFrame with id '{0}'.", _frameId);

ExternalInterface.call(IFrameExternalCalls.FUNCTION_INDEXIFRAME, _frameId, zIndex);

}



b、在setupExternalInterface方法中增加行

ExternalInterface.call(IFrameExternalCalls.INSERT_FUNCTION_INDEXIFRAME);

2、修改IFrameExternalCalls.as文件

a. 

 public static var INSERT_FUNCTION_CREATEIFRAME:String = 

            "document.insertScript = function ()" +

            "{ " +

                "if (document." + FUNCTION_CREATEIFRAME + "==null)" + 

                "{" + 

                    FUNCTION_CREATEIFRAME + " = function (frameID, overflowAssignment)" +

                    "{ " +

                        "var bodyID = document.getElementsByTagName(\"body\")[0];" +

                        "var newDiv = document.createElement('div');" +

                        "newDiv.id = frameID;" +

                        "newDiv.style.position ='absolute';" +

                        "newDiv.style.backgroundColor = '#FFFFFF';" + 

                        "newDiv.style.border = '0px';" +

                        "newDiv.style.overflow = overflowAssignment;" +

                        "newDiv.style.display = 'none';" +

                        "bodyID.appendChild(newDiv);" +

                    "}" +

                "}" +

            "}";

改成

public static var INSERT_FUNCTION_CREATEIFRAME:String =

"document.insertScript = function ()" +

"{ " +

"if (document." + FUNCTION_CREATEIFRAME + "==null)" +

"{" +

FUNCTION_CREATEIFRAME + " = function (frameID, overflowAssignment)" +

"{ " +

"var bodyID = document.getElementsByTagName(\"body\")[0];" +

"var newDiv = document.createElement('div');" +

"newDiv.id = frameID;" +

"newDiv.style.position ='absolute';" +

"newDiv.style.backgroundColor = '#FFFFFF';" +

"newDiv.style.border = '0px';" +

"newDiv.style.overflow = overflowAssignment;" +

"newDiv.style.zIndex = '999';" + 

"newDiv.style.display = 'none';" +

"bodyID.appendChild(newDiv);" +

"}" +

"}" +

"}";

b.增加以下二行

public static var FUNCTION_INDEXIFRAME:String = "indexIFrame";

public static var INSERT_FUNCTION_INDEXIFRAME:String = "document.insertScript = function ()" + "{ " + "if (document." + FUNCTION_INDEXIFRAME + "==null)" + "{" + FUNCTION_INDEXIFRAME + " = function (frameID,zIndex)" + "{" + "document.getElementById(frameID).style.zIndex=zIndex;" + "}" + "}" + "}";

3、将背景设成透明

a. 在index.template.html文件中增加 wmode= "transparent"

b. mx:Application中设置backgroundAlpha:0(已测试)，如果是s:Application中，设置 contentBackgroundAlpha="0" backgroundAlpha="0" (未测试)

使用示例：

有弹出窗口时

addEventListener(DropDownEvent.OPEN, function(e:Event):void {

frame.indexIFrame(-1);

}, true);

弹出窗口关闭时

addEventListener(DropDownEvent.CLOSE, function(e:Event):void {

frame.indexIFrame(999);

}, true);

注意：

细心的读者可能会发现，上面说了背景透明，并不是仅仅指Application的背景透明，还有其它容器也是一样，比如说你把Iframe放到VBox中，那么从VBox开始，一层层往上面找，一直到Application，每一层的背景都必须是透明的，否则会看不到效果。

转载：http://hi.baidu.com/chensong_blog/item/899022aef7314eaa29ce9d97