有时候我们需要在Flex应用中嵌入HTML代码,根据嵌入HTML要求的不同有以下三种方法:
1、Flex文本组件(Label、Text、TextArea)的htmlText属性支持一些基本的HTML代码,例如:
2、我们可以将Flex应用嵌入到HTML页面中,然后通过Flex2中的ExternalInterface(Flex1.5使getURL("javascript.:javascriptMethod"))
来实现Flex与HTML javascript的相互交互,进一步的,如果要在Flex应用中嵌入完整的HTML呢?
其实实现的方法很简单,只需要使用HTML的Iframe标签来导入需嵌入的HTML页面,
然后使用ExternalInterface调用相应的javasript将该Iframe移动到我们Flex页面需要嵌入HTML页面的部分之上就可以了,示意图如下:
也就是说,我们包含Flex SWF文件的HTML页面主要有三个部分:
1、Flex swf 插件容器,FlexBuilder自动生成部分
Flex中的导入Iframe页面和移动Iframe的代码如下:
两个方法分别直接调用使用ExternalInterface.call调用前面我们提到的HTML页面上的两个Javascript方法。另外一个要注意的是<Canvas/>
继承自flash.display.DisplayObject类的localToGlobal方法的使用,该方法将基于Flash场景的坐标转换为基于全局本地坐标,也就是浏览器页面坐标:
这样就可以在Flex页面中嵌入任意的HTML页面了,为了方便,Brian写了个嵌入HTML页面的代理IFrame组件,该组件封装了所有需要的Flex端代码:
该IFrame组件有个source属性用来记录需要载入的嵌入HTML页面的地址,每次source属性更新时,调用ExternalInterface.call("loadIFrame", source)
调用javascript方法loadIFrame方法在HTML 页面中的IFrame中载入要嵌入的HTML页面。
另外,重载了Canvas的visible属性,以便在Canvas隐藏HTML页面中的IFrame。
如下使用该组件在Flex应用中嵌入HTML页面方法:
以上代码将在我们的Flex应用中嵌入本站首页。
(3) 前面的两种方法都是用的Flex2.0的老的函数,如果觉得麻烦的话也可以使用现成的类
地址:http://code.google.com/p/flex-iframe/
将类文件加入项目,加下面的语句在需要的地方,指明URL就好了