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

<?xml version="1.0" encoding="utf-8"?>
<!--- - - - - - - - - - - - - - - - - - - - - - - - -
* @author:Frost.Yen
* @E-mail:[email protected]
* @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。

时间: 2024-10-12 11:02:54

[Flex] IFrame系列 —— 嵌入html后Alert弹出窗口被IFrame遮挡问题的相关文章

重写alert弹出窗口样式

<script> window.alert = function(str)    {     var shield = document.createElement("DIV");     shield.id = "shield";     shield.style.position = "absolute";     shield.style.left = "0px";     shield.style.top

安卓—自定义alert弹出窗口

 默认用法 public void alertDialog(View view) { AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("弹出窗"); builder.setMessage("提示信息!"); builder.setPositiveButton("确认", new DialogInterface.OnClickListener

怎么使用response.write来做一个javascript的alert弹出窗口

Page.RegisterStartupScript("alert", "<script language=javascript>alert('添加成功');</script>");_____________________________________________________________________ response.write("<script language='javascript'>windo

jsp网页弹出窗口的多种办法

http://blog.csdn.net/huangfoxjava/article/details/2973033 登录|注册     huangfoxjava的专栏 目录视图 摘要视图 订阅 关于jsp网页弹出窗口[很多种方法......] 分类: JSP2008-09-24 14:22 5799人阅读 评论(0) 收藏 举报 jspjavascript框架html脚本浏览器 各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript

asp .NET弹出窗口 汇总(精华,麒麟创想)

asp .NET弹出窗口 汇总(精华,麒麟创想) 注://关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>");this.Response.Write("{top.ope

asp .NET弹出窗口汇总

注://关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>");this.Response.Write("{top.opener =null;top.close();}&q

js弹出窗口总结6种弹窗方法

注: //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>"); this.Response.Write("{top.opener =null;top.close();}

JavaScript 之 弹出窗口总结

//关闭弹窗 <script language="javascript"> window.close(); </script> //同时关闭父窗口和子窗口 <script language="javascript"> top.opener =null; top.close(); </script> //弹出窗口刷新当前页面width=200 height=200菜单.菜单栏,工具条,地址栏,状态栏全没有 <scr

C# .NET弹出窗口大全

注://关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>");this.Response.Write("{top.opener =null;top.close();}&q