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

项目中要用到Flex与Iframe结合，但是在使用的过程中出现了一些问题，Flex Pop出来的窗口都会被Iframe给遮住，在网上找了很多资料但是都没办法完全解决，网上很多都说在pop窗口时把Iframe的visbale设置为false，但是这样的解决办法不是很好，所以在看了google的Iframe原代码后，发现Iframe是被动态显示出来的，也就是说Iframe始终会显示在最上层，那么在发现这个问题之后，想了如下办法：
1、首先把Iframe的位置，也就是zIndex设置为-1，让他显示在最底层。
2、光显示在最底层是不够的，因为Iframe会被Flex编译出来的swf所覆盖，所以需要把Flex的背景设置为透明，才能显示出来
3、设置为透明显示出来之后如果想在Iframe上进行操作还需要添加鼠标事件(在鼠标移到iframe上的时候把层的zIndex设置为1，离开时设置为-1)

具体看如下代码：
首先修改Iframe的IFrameExternalCalls.as源代码：
把zIndex设置为-1

 

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 = '-1';"+
                        "newDiv.style.display = 'none';" +
                        "bodyID.appendChild(newDiv);" +
                    "}" +
                "}" +
            "}";

 2、调用代码

 为Iframe添加mouseover事件 Application和Panel两个地方设置为backGroundAlpha为0，也就是设置为透明，关键代码在，Flex调用js的方法中，也就是在鼠标移至Iframe上时，让其zIndex显示为1，这是iframe显示出来之后在用js给当前的div也就是显示出来的Ifram加上事件，当鼠标离开时zIndex设置为-1，我这里没有在Flex的Iframe中设置鼠标离开事件，而是放到js中，那是因为显示出来的div层与Flex的Iframe是一个互斥事件，如果设置了之后，鼠标在Iframe的区域移动，那么鼠标离开事件与鼠标放上去的事件会不断交替执行，性能和感知都会很差。document.getElementById('ifm0')这个ifm0就是你当前页flex的Ifram的Id，在google的源代码中会给这个Id加上一个序列

也就是一个编号，也就变成ifm0了，具体大家看源代码，这个ifm0也就是显示出来的iframe的div的ID

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application backgroundAlpha="0" layout="vertical" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flexiframe="com.google.code.flexiframe.*">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			private function showWin():void{
				Alert.show("TestWin");
			}
			
			private function mOver(e:MouseEvent):void{
				 ExternalInterface.call("function mover(){document.getElementById('ifm0').style.zIndex=\"1\";document.getElementById('ifm0').onmouseout=function (){document.getElementById('ifm0').style.zIndex=\"-1\";}}");
			}
		]]>
	</mx:Script>
	<mx:Style source="style/flex_skins.css" />
	<mx:Button label="test" click="showWin();"/>
	<mx:Panel title="iframe" backgroundAlpha="0" id="pl" width="100%" height="200">
		<flexiframe:IFrame mouseOver="mOver(event)" cachePolicy="off" source="/FlexIframeInWeb/WebContent/a.html" id="ifm" width="100%" height="100%"/>
	</mx:Panel>
</mx:Application>

至此困扰了我很久的问题解决了，附上截图，如果有更好的方法，欢迎大家留言交流，由于我使用的是web项目与Flex相结合里面有很多多余的包(大于10M了)，上传不上去，如果有需要源代码的请留下邮箱，我会发给大家。

 

评论

33 楼 shil88121 2015-04-23  

我也遇到这个问题解决不了，发我一个啦~~[e-mail]

32 楼 ylixang 2013-07-22  

群主，能否也发给我一份[e-mail]

31 楼 qdongl 2012-12-04  

qdongl 写道

我也遇到同样的问题了，照你的方法没有实现效果呢。麻烦可否发一份  [e-mail]   不胜感激了！

邮箱：是这个[e-mail]  刚打错了

30 楼 qdongl 2012-12-04  

我也遇到同样的问题了，照你的方法没有实现效果呢。麻烦可否发一份  [e-mail]   不胜感激了！

29 楼 jsbrml 2012-12-03  

我也遇到这个问题，麻烦发我一份，谢谢  邮箱：[e-mail]

28 楼 hacxer 2012-11-28  

我的邮箱是 [e-mail]

27 楼 hacxer 2012-11-28  

大神啊，我做的项目也是被背景层盖住了，求代码啊

26 楼 hacxer 2012-11-28  

同问题啊，求大神分享代码 [b][/[size=xx-small][/size]b]

25 楼 ljy_888 2012-10-15  

可以给[e-mail]发一份吗？谢谢！

24 楼 小卒…… 2012-10-11  

您好~我现在正遇到这个问题能发给我一份吗？谢谢 我的邮箱[e-mail]!!

23 楼 feikai2012 2012-09-21  

[e-mail]

22 楼 z915139481 2012-09-19  

按上面写的做没用，请给我一份源码[e-mail],谢谢。

21 楼 victorqin 2012-09-06  

我也想要，多谢了，邮箱:[e-mail]

20 楼 zhangyan_dhcc 2012-08-25  

楼主你好，我按照你的方法试验了多次没有成功，请给我一份源码[e-mail],谢谢。

19 楼 琛哥哥 2012-08-23  

原来的iframe问题没解决，遗留下来，正好看看，麻烦发我一份
[e-mail]

18 楼 yfisaboy 2012-08-06  

我设置透明了还是显示不出来怎么办呢

17 楼 向前哥 2012-08-01  

碰到此问题。。当我移开鼠标时。。看不到IFRAME内容了。。麻烦发我一份研究下。。[e-mail]谢谢了

16 楼 lilei22 2012-07-24  

我在开发中遇到这个问题了，向大侠求教来了，给[e-mail]发一份吧，急等中

15 楼 heiheilinlin 2012-07-23  

我最近也在做html嵌入flex页面，我按照你的方法做了，并没有将页面内容显示出来，能不能给我份你的代码参考参考啊？
我的邮箱[e-mail]

14 楼 broha 2012-07-18  

麻烦也给我发一份源码吧，我的邮箱[e-mail]