IFrame 组件使用技术文档
Adobe 公司在 flex 技术中提供了 flex 调用 js 的接口 ExternalInterface，通过这个接口的
call 方法 flex 来调用 js 中的方法，同时 ExternalInterface 接口也提供了 addCallback 方法，在
这个方法中可以注册一个 flex 方法，这样 js 页面就能直接调用这个注册的 flex 方法，从而
实现了 flex 和 js 的交互。
但是到目前为止，flex 还没有提供直接的组件使 flex 中直接显示 js 页面，所以这非常
不 方 便 ， 因 为 js 的 所 有 方 法 都 只 能 写 在 工 程 目 录 下 html-template 文 件 夹 的
index.template.html 的 html 文件中。在本工程中这种做法显然是不妥的，通过这种方法不能
够在 flex 页面上显示 js 写出的百度地图，所以这个方法只能放弃。
为了实现 flex 页面中显示百度地图（用 js 编写），并且 flex 和 js 能够很方便的交互，
本工程引入了 google 开发的 IFrame 组件，通过这个组件，就能够解决上面的所有问题。
具体的操作步骤如下：
一. 下载 IFrame 组件
下载地址：https://github.com/flex-users/flex-iframe/downloads，这里要注意你所下载的
IFrame 版本和你所选用的 flex 版本要一致。如果版本不一致，会存在兼容的问题，flex 可
能显示不了 js 页面。本工程下载的是 flex-iframe-1.5.1 版本，它既支持 flex3.0，又支持
flex4.0
二．Flex 工程配置方法
要在工程中用到 IFrame 组件，必须要保证下面三个必不可少的条件：
1. 将步骤一下载的包解压之后，在 bin 文件夹下找到 swc 资源，本工程是 flex-
iframe-1.5.1.swc，将 swc 库文件导入 flex 工程 lib 下。
2. 将解压文件下面 asdoc 文件夹下的 AC_OETags.js 复制到 flex 工程下面的 html-
template 文件夹，这样就将 flex 工程下面的 AC_OETags.js 覆盖了，以便于确保浏
览器兼容性。
3. 将 index.template.html 拷贝到 flex 项目下的 html-template 文件夹下，这样会覆盖
html-template 文件夹下的 index.template.html 文件，新加入的 index.template.html
比默认的 index 页面多加入了参数，生成的 IFrame 会用到。
三．在 flex 项目中引入 IFrame 组件。
在 flex 工程中通过以下几个小步骤来引入 IFrame 组件
1. 在 flex 工程主应用程序中引入 IFrame 组件库
<mx:Application xmlns:flexiframe=http://code.google.com/p/flex-
iframe/>
2. 开发的 js 页面的放置
将你所写的 js 页面放到 flex 工程下的 html-template 文件夹下，这其实就是 flex
工程默认的编译路径，这样在 IFrame 组件中可以直接引入所编写的 js 页面
3. 在 flex 工程中引入组件
<flexiframe:IFrame id="testHtml" label="Map" source="testMap.jsp" width="100%"
height="100%"/>，这只是个例子，至于其中的各个属性可以根据需要来设置 。
其中的 source 属性的值就是要引入的 js 页面。
四．在 flex 中调用 js 函数
IFrame 组件中提供了 callIFrameFunction 方法，这个方法中有一个参数就是要引入的 js
页面函数值，这样就可以直接调用 js 页面写的方法。
评论11