在flex的web应用中，我们往往必须有嵌入html的需求，这时候你会发现IFrame很有用！

flex而且可以和html中的JavaScript进行交互，flex可以通过iframe调用到html中的JavaScript方法以及获取调用后的返回值。

flex iframe下载地址：https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip

bin有需要用到的flex库 swc

flex代码：

<?xml version="1.0" encoding="utf-8"?>

<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" xmlns:ns="http://code.google.com/p/flex-iframe/">

    <fx:Script>

        <![CDATA[

            import mx.controls.Alert;

            protected function onCallJS(event:MouseEvent):void

            {

                // 调用当前iframe嵌入页面中的onCallJS 的JS方法

                iframeLocal.callIFrameFunction("flexCall");

            }

            protected function onSendParamToHtml(event:MouseEvent):void

            {

                // 调用当前iframe嵌入页面中的flexSendParam 的JS方法，并传入一个参数

                iframeLocal.callIFrameFunction("flexSendParam",["来自于flex的一个参数"]);

            }

            protected function onSendParamToHtml2(event:MouseEvent):void

            {

                // 调用当前iframe嵌入页面中的flexSendParam2 的JS方法，并传入2个参数。

                //flexSendParam2方法会返回一个字符串，最后一个回调就是输出值的函数

                iframeLocal.callIFrameFunction("flexSendParam2",["Frost.Yen","来自于四川"],callback);

                function callback(data:*):void

                {

                    Alert.show(data);

                }

            }

        ]]>

    </fx:Script>

    <fx:Declarations>

        <!-- 将非可视元素（例如服务、值对象）放在此处 -->

    </fx:Declarations>

    <s:VGroup  width="100%" height="100%" >

        <s:Panel width="100%" height="100%" title="使用iframe本地页面。。。。">

            <s:VGroup  width="100%" height="100%" >

                <s:HGroup>

                    <s:Button label="Flex call js" click="onCallJS(event)"/>

                    <s:Button label="Flex send one param to js" click="onSendParamToHtml(event)"/>

                    <s:Button label="Flex send mult param to js" click="onSendParamToHtml2(event)"/>

                </s:HGroup>

                <ns:IFrame id="iframeLocal" width="100%" height="100%" source="local.html" />

            </s:VGroup>

        </s:Panel>

        <s:Panel width="100%" height="100%" title="使用远程页面。。。。">

            <ns:IFrame id="iframeContainer" width="100%" height="100%" source="http://www.cnblogs.com/frost-yen" overlayDetection="true">

            </ns:IFrame>

        </s:Panel>

    </s:VGroup>

</s:Application>

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">

  <head>

    <title>iframe local.html</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

        // 无参数

        function flexCall() {

            alert("flex call js ....");

        }

        // 1个参数

        function flexSendParam(message) {

            alert(message);

        }

        // 多个参数 并返回值

        function flexSendParam2(name,message) {

            alert(name+message);

            return "来自于js的消息："+name+" "+message;

        }

    </script>

  </head>

  <body>

    flexIframe example html page!

    <input type="button" value="say" onclick="flexCall()"/>

  </body>

</html>

需要注意的是：flex项目工程需要发布到http的应用服务器（如tomcat、Apache、iis）这些服务器中，用http请求方式才能调用到页面内容和JavaScript方法。如果不发布到应用服务器中，那样只能在iframe中嵌套远程的http请求的页面，本地静态页面是无法显示的，顾名思义就是用flex调试是不行的，而且会有意想不到的bug产生。

测试以上代码会发现

Alert.show(data); 

Alert弹出窗口会被iframe窗口遮挡，后面会讲到这个问题。

[Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法的更多相关文章

  1. [Flex] IFrame系列 —— 嵌入本地页面两种方式source和content（html页面和html代码）

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  2. Java嵌入式数据库H2学习总结(三)——在Web应用中嵌入H2数据库

    H2作为一个嵌入型的数据库,它最大的好处就是可以嵌入到我们的Web应用中,和我们的Web应用绑定在一起,成为我们Web应用的一部分.下面来演示一下如何将H2数据库嵌入到我们的Web应用中. 一.搭建测 ...

  3. 【测试方法】Web测试中bug定位基本方法

    知识总结:Web测试中bug定位基本方法 涉及知识点:测试方法 在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,没错,确实是BUG.进一步了解这个BUG的问题出 ...

  4. 【HANA系列】SAP HANA计算视图中的RANK使用方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA计算视图中的RA ...

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

    <?xml version="1.0" encoding="utf-8"?> <!--- - - - - - - - - - - - - - ...

  6. [Flex] IFrame系列 —— IFrame嵌入html点击其他组件后页面消失的问题

    在flex建的web项目中,打开index.template.html,将param.wmode = "transparent";添加到以下位置 <script type=& ...

  7. [转]WinForm和WebForm下读取app.config web.config 中邮件配置的方法

    本文转自:http://blog.csdn.net/jinbinhan/article/details/1598386 1. 在WinForm下读取 App.config中的邮件配置语句如下: Con ...

  8. Web测试中定位bug的方法

    在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,没错,确实是BUG.进一步了解这个BUG的问题出在那里,是测试人员需要掌握的,可以简单的使用浏览器自带开发者工具 ...

  9. Spring在web应用中获得Bean的方法

    一:使用ApplicationContext获得Bean 首先新建一个类,该类必须实现ApplicationContextAware接口,改接口有一个方法,public void setApplica ...

随机推荐

  1. CodeFirstMigrations更新数据库结构（EF数据迁移）

    背景 code first起初当修改model后,要持久化至数据库中时,总要把原数据库给删除掉再创建(DropCreateDatabaseIfModelChanges),此时就会产生一个问题,当我们的 ...

  2. linux服务之varnish

    https://www.varnish-cache.org/installation/redhatvarnish是现在很流行的一个HTTP(80)缓存加速解决方案,varnish是基于内存的缓存加速. ...

  3. ASP.NET让FileUpload控件支持浏览自动上传功能的解决方法

    ASP.NET的FileUpload控件默认是不支持服务端的onchange事件的,此时可以用一种变通的方法来实现这一功能. 这就需要借用客户端的onchange事件,调用__doPostBack方法 ...

  4. 【转】ODBC、OLE DB、 ADO的区别

    一.ODBC ODBC的由来 1992年Microsoft和Sybase.Digital共同制定了ODBC标准接口,以单一的ODBC API来存取各种不同的数据库.随后ODBC便获得了许多数据库厂商和 ...

  5. Struts2 - Check Login Interceptor

    Struts2使用Interceptor做用户登陆检查: 1)新增一个bean: User.java package com.my.beans; import java.util.Date; impo ...

  6. Java与.NET兼容的RSA密钥持久化方法

    默认情况下,.NET生成的RSA密钥对可以用XML或字节流来保存,而JAVA中生成的RSA密钥对只能用字节流来保存.而它们的字节流格式不同,就导致Java中生成的RSA密钥对不能在.NET中使用,而. ...

  7. [转]使用eclipse+pydev远程调试OpenStack

    作者:张华  发表于:2014-01-17版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 1, ...

  8. 剑指offer系列25---构建乘积数组

    [题目]给定一个数组A[0,1,…,n-1],请构建一个数组B[0,1,…,n-1],其中B中的元素B[i]=A[0]A[1]…A[i-1]A[i+1]…A[n-1].不能使用除法. package ...

  9. Linux下查看进程打开的文件句柄数和如何修改

    修改文件句柄数在Linux下,我们使用ulimit -n 命令可以看到单个进程能够打开的最大文件句柄数量(socket连接也算在里面).系统默认值1024. 对于一般的应用来说(象Apache.系统进 ...

  10. Oracle11g中Exp命令空表不能导出的问题

    http://www.jb51.net/article/43894.htm 一.不能导出空表的原因 1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空 ...