Flex Google Iframe 遮盖 问题

项目用flex的话. 估计都会用上 iframe  这个google 插件

 

很好用的一说

 

不过也会出现很多问题. 

比如 层的上下级关系. 导致 flex alert 出来的 被iframe 遮盖了.

 

解决这个问题很简单. 

思路:

1. 在alert 或者弹出别的窗口之前.把iframe zindex 设置为-1 . 即隐藏掉

2. alert后, 或者激活当前iframe窗口时候. 把zindex改回来就可以了

 

好吧. 现在就开始做

 

首先修改iframe源码 . 加入 设置index 的相关方法

第一步:

        修改IFrameExternalCalls.as  加入如下代码

 

 

/**
		 * 设置div层z-index 为-1
		 */
		public static var FUNCTION_MINUSONEDIV:String = "minusOneDiv";
		
		/**
		 * The JavaScript code to call to insert the function that set z-index -1.
		 */
		public static var INSERT_FUNCTION_MINUSONEDIV:String = 
			"document.insertScript = function ()" +
			"{ " +
			"if (document." + FUNCTION_MINUSONEDIV + "==null)" +
			"{" +
			FUNCTION_MINUSONEDIV + " = function (frameID)" +
			"{" +
			"document.getElementById(frameID).style.zIndex='-1';" +
			"}" +
			"}" +
			"}";
		
		
		/**
		 * 设置div层z-index 为1
		 */
		public static var FUNCTION_SETONEDIV:String = "setOneDiv";
		
		/**
		 * The JavaScript code to call to insert the function that shows a Div in the DOM.
		 */
		public static var INSERT_FUNCTION_SETONEDIV:String = 
			"document.insertScript = function ()" +
			"{ " +
			"if (document." + FUNCTION_SETONEDIV + "==null)" +
			"{" +
			FUNCTION_SETONEDIV + " = function (frameID)" +
			"{" +
			"document.getElementById(frameID).style.zIndex = '1';" +
			"}" +
			"}" +
			"}";

 

 

第二步

           修改IFrame.as 在初始化js方法的时候 把新加的这两个方法初始化

 

在 setupExternalInterface 方法中添加 

 

 

ExternalInterface.call(IFrameExternalCalls.INSERT_FUNCTION_MINUSONEDIV);//添加 设置zindex为-1 的方法
            ExternalInterface.call(IFrameExternalCalls.INSERT_FUNCTION_SETONEDIV);//添加 设置zindex为1 的方法

 

 

ok了. 下来就是调用了

 

alert之前调用

 

ExternalInterface.call(IFrameExternalCalls.FUNCTION_MINUSONEDIV, "processViewer0");

 alert之后调用

 

ExternalInterface.call(IFrameExternalCalls.FUNCTION_SETONEDIV, "processViewer0");

 

processViewer0 改成的 iframe id  记得后面加0

 

 备注: 每次退出 记得 processViewer.removeIFrame();