项目中要用到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,arial"> "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,arial"> frame.indexIFrame(999);
注意:
细心的读者可能会发现,上面说了背景透明,并不是仅仅指Application的背景透明,还有其它容器也是一样,比如说你把Iframe放到VBox中,那么从VBox开始,一层层往上面找,一直到Application,每一层的背景都必须是透明的,否则会看不到效果。