Flex与Google Iframe弹出框被Iframe遮盖问题解决办法
2012-09-24 14:41
459 查看
原文地址:/article/4037003.html
截图a截图b
项目中要用到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
Iframeexternalcalls.as代码
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;" +
<STRONG> </STRONG>"newDiv.style.zIndex = '-1';"<STRONG> </STRONG>+
"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
Flexiframeinweb.mxml代码
<?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了),上传不上去,如果有需要源代码的请留下邮箱,我会发给大家。
大小: 67.7 KB
大小: 49.2 KB
查看图片附件
截图a截图b
项目中要用到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
Iframeexternalcalls.as代码
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;" +
<STRONG> </STRONG>"newDiv.style.zIndex = '-1';"<STRONG> </STRONG>+
"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 = '-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
Flexiframeinweb.mxml代码
<?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>
<?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了),上传不上去,如果有需要源代码的请留下邮箱,我会发给大家。
大小: 67.7 KB
大小: 49.2 KB
查看图片附件
相关文章推荐
- Flex与Google Iframe弹出框被Iframe遮盖问题解决办法
- Flex与Google Iframe弹出框被Iframe遮盖有关问题解决方法
- Flex中利用IFrame嵌入HTML网页后,出现菜单被遮挡的问题解决办法,包括IFrame别隐藏的问题
- iframe跨域访问session丢失问题解决办法
- IIS中网站弹出登陆框之匿名访问权限问题解决办法
- JS加载iFrame出现空白问题的解决办法
- wpf弹出窗,被主界面遮挡问题解决办法
- IE下使用jQuery重置iframe地址时内存泄露问题解决办法
- IE下使用jQuery重置iframe地址时内存泄露问题解决办法
- MFC中使用SetWindowPos GroupBox遮盖内部控件问题解决办法
- NVIDIA GeForce 940M 设备是不可移动的,无法弹出或拔出问题解决办法
- Flex builder3 调试弹出窗口Flex builder cannot locate the required version of Flash Player解决办法
- 解决Chrome在部分网站不能弹出上传文件对话框的办法及flash问题
- [原创]IE6下wbox弹出iframe窗口加载页面空白问题解决
- Android sdk更新过程中出现问题 (连接不上Google的服务资源)解决办法
- IE里Iframe的Cookie问题解决办法
- Easyui弹出窗口在iframe中弹出被当前iframe遮罩的问题(解决方法)
- 使用iframe快速解决IE6下弹出层被下拉列表遮挡问题
- Flex4 嵌入字体无法显示问题解决办法
- 关于SDK更新遇到Failed to fetch URL http://dl-ssl.google.com/android refused问题的解决办法