flex IFrame控件的配置使用详细过程
4星 · 超过85%的资源 需积分: 16 14 浏览量
2012-04-26
14:44:21
上传
评论 1
收藏 32KB DOC 举报 
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 页面写的方法。
- 1
- 2
- 3
前往页