在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代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                xmlns:s="library://ns.adobe.com/flex/spark"
  4.                xmlns:mx="library://ns.adobe.com/flex/mx"   minWidth="955" minHeight="600" xmlns:ns="http://code.google.com/p/flex-iframe/">
  5.  
  6.     <fx:Script>
  7.         <![CDATA[
  8.             import mx.controls.Alert;
  9.             protected function onCallJS(event:MouseEvent):void
  10.             {
  11.                 // 调用当前iframe嵌入页面中的onCallJS 的JS方法
  12.                 iframeLocal.callIFrameFunction("flexCall");
  13.             }
  14.  
  15.             protected function onSendParamToHtml(event:MouseEvent):void
  16.             {
  17.                 // 调用当前iframe嵌入页面中的flexSendParam 的JS方法，并传入一个参数
  18.                 iframeLocal.callIFrameFunction("flexSendParam",["来自于flex的一个参数"]);
  19.             }
  20.  
  21.             protected function onSendParamToHtml2(event:MouseEvent):void
  22.             {
  23.                 // 调用当前iframe嵌入页面中的flexSendParam2 的JS方法，并传入2个参数。
  24.                 //flexSendParam2方法会返回一个字符串，最后一个回调就是输出值的函数
  25.                 iframeLocal.callIFrameFunction("flexSendParam2",["Frost.Yen","来自于四川"],callback);
  26.  
  27.                 function callback(data:*):void
  28.                 {
  29.                     Alert.show(data);
  30.                 }
  31.             }
  32.         ]]>
  33.     </fx:Script>
  34.  
  35.     <fx:Declarations>
  36.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->
  37.     </fx:Declarations>
  38.     <s:VGroup  width="100%" height="100%" >
  39.         <s:Panel width="100%" height="100%" title="使用iframe本地页面。。。。">
  40.             <s:VGroup  width="100%" height="100%" >
  41.                 <s:HGroup>
  42.                     <s:Button label="Flex call js" click="onCallJS(event)"/>
  43.                     <s:Button label="Flex send one param to js" click="onSendParamToHtml(event)"/>
  44.                     <s:Button label="Flex send mult param to js" click="onSendParamToHtml2(event)"/>
  45.                 </s:HGroup>
  46.                 <ns:IFrame id="iframeLocal" width="100%" height="100%" source="local.html" />
  47.             </s:VGroup>
  48.         </s:Panel>
  49.         <s:Panel width="100%" height="100%" title="使用远程页面。。。。">
  50.             <ns:IFrame id="iframeContainer" width="100%" height="100%" source="http://www.cnblogs.com/frost-yen" overlayDetection="true">
  51.             </ns:IFrame>
  52.         </s:Panel>
  53.     </s:VGroup>
  54. </s:Application>

html代码：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
  3.   <head>
  4.     <title>iframe local.html</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.     <script type="text/javascript">
  7.         // 无参数
  8.         function flexCall() {
  9.             alert("flex call js ....");
  10.         }
  11.         // 1个参数
  12.         function flexSendParam(message) {
  13.             alert(message);
  14.         }
  15.         // 多个参数 并返回值
  16.         function flexSendParam2(name,message) {
  17.             alert(name+message);
  18.             return "来自于js的消息："+name+" "+message;
  19.         }
  20.     </script>
  21.   </head>
  22.   <body>
  23.     flexIframe example html page!
  24.     <input type="button" value="say" onclick="flexCall()"/>
  25.   </body>
  26. </html>

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

测试以上代码会发现

  1. Alert.show(data); 
  2.  
  3. 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. [firefox+plug-n-hack]轻松地配置burpsuite代理https流量

    http://zone.wooyun.org/content/25982 需要用到firefox的插件plug-n-hack下载https://raw.githubusercontent.com/mo ...

  2. 010. 使用.net框架提供的属性

    C#允许在类和类成员上声明特性(类), 可在运行时解释类和类的成员. 这个特性也称为属性, 使用Attribute.下面演示如何使用.net框架提供的属性. using System; using S ...

  3. oracle11g导入dmp文件（根据用户）

    已知:用户名.密码.dmp文件 .(指即将导入dmp文件的用户名和密码) 需求:将该dmp文件导入本地oracle11g中. 步骤: 1.将该dmp文件拷贝到G:\oracle11g\admin\or ...

  4. 在web.config里面添加配置信息

    在web.config里面添加配置信息规范文字 代码如下 在<appSettings>中间添加 <add key="Director" value="处 ...

  5. 程序员书单_java学习基础编程篇

    Java程序设计语言.(美国)阿诺德.清晰版 http://download.csdn.net/detail/shenzhq1980/9076093 JAVA2核心技术第1卷.基础知识7th.part ...

  6. thinkphp中redirect重定向后隐藏index.php

    首先,.htaccess文件要配置好隐藏index.php.系统默认生成的就行. 然后,也是最关键的一部,要在Application/Home/Conf里的config.php文件中增加如下配置: & ...

  7. Python 上传和更新函数模块到PyPI

    1. update setup.py from distutils.core import setup setup( name = 'iamericnester', version = '1.4.0' ...

  8. shell和vim的配色

    shell的默认配色 mac,需要用iTerm2, 选自带的solarized即可 debian ,选择自带的 solarized dark vim配色 git clone git://github. ...

  9. linux截图工具scrot

    SCROT截图工具 安装命令 sudo apt-get install scrot 截图命令使用说明: 1.抓取整个桌面:    scrot   ~/Pictures/pic1.jpg2.抓取窗口:  ...

  10. (WPF) MVVM: DataGrid Binding

    Binding到DataGrid的时候,需要用到ObservableCollection. public ObservableCollection<Customer> Customers ...