• [Flex] IFrame系列 —— IFrame嵌入html后Alert弹出窗口被IFrame遮挡问题


    <?xml version="1.0" encoding="utf-8"?>
    <!--- - - - - - - - - - - - - - - - - - - - - - - - -
    * @author:Frost.Yen
    * @E-mail:871979853@qq.com
    * @create:    2016-6-1 上午11:37:00
    - - - - - - - - - - - - - - - - - - - - - - - - - - -->
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" backgroundAlpha="0" xmlns:ns="http://code.google.com/p/flex-iframe/">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <fx:Script>
            <![CDATA[
                import mx.controls.Alert;
                protected function showIFrameHandler(event:MouseEvent):void
                {
                    layer(1);
                }
                
                protected function btn_clickHandler(event:MouseEvent):void
                {    
                    layer(-1);
                    Alert.show("test iframe alert !");
                }
                
                /**
                 * 设置IFrame的层级
                 * @param index (1表示最上层,-1表示最下层)
                 */
                protected function layer(index:int):void
                {
                    ExternalInterface.call("eval", "(function(){document.getElementById('iframe00').style.zIndex='"+index+"';})()");    
                }
            ]]>
        </fx:Script>
        
        <fx:Declarations>
            <!-- 将非可视元素(例如服务、值对象)放在此处 -->
        </fx:Declarations>
        <s:Button id="btn" label="click me" click="btn_clickHandler(event)"/>
        <s:Panel id="panel" title="flex嵌入html页面" width="80%" height="80%"  backgroundAlpha="0" mouseOver="showIFrameHandler(event)">
            <ns:IFrame id="iframe0" width="100%" height="100%" source="http://www.yanzimen.com">
            </ns:IFrame>
        </s:Panel>
    </s:Application>

    普遍认为,iframe是动态显示导致iframe始终在最高层,遮挡住弹出框,解决此问题要注意以下几点:

    1、当需要显示弹出框时,将iframe置于最底层,即zIndex设为-1,当不需要显示弹出框时,可将iframe至于顶层,即zIndex设为1;

    2、必须将每个组件的backgroundAlpha属性值设为0,因为Iframe会被Flex编译出来的swf所覆盖,所以需要把Flex的背景设置为透明,才能显示出来;

    3、需要在index.template.html中添加 params.wmode = "transparent";字段,此项防止点击flex组件时,iframe消失的问题。

    4、document.getElementById('iframe00').style.zIndex中的iframe00是flex标签中IFrame 的id+"0"的组合,在google的源代码中会给这个Id加上一个序列,这个iframe00也就是显示出来的iframe的div的ID。

  • 相关阅读:
    有是JSF的一个小问题,搞了我两天!从周五到周二
    MyFaces Tree2控件使用 From http://blog.163.com/net_wood/blog
    使用JSF的Selectonemenu
    SSO摘抄
    用于快速将 Web 应用程序集成到 WebSphere Portal 中的选项
    Lua 公历转农历算法
    编程语言适用场合。。。
    了解grep、vim的查找 和正则表达式
    程序员知识资产的投资
    铁道部新客票系统设计(一)
  • 原文地址:https://www.cnblogs.com/frost-yen/p/5552395.html
Copyright © 2020-2023  润新知