这篇教程把Flex IFrame的用法拆得明明白白：从“Flex IFrame到底是什么”的基础认知，到如何在Flex项目里配置参数、写嵌入代码的具体步骤，再到大家最头疼的跨域限制、父子页面交互、自适应尺寸这些坑，都给你讲透了。不管你是刚接触Flex的新手，还是遇到瓶颈的老开发者，跟着教程一步步来，不用猜也不用试错，很快就能实现“Flex里嵌HTML”的需求。
不用怕技术门槛——每一步都有具体操作示例，关键代码还标了注释，连“怎么测试是否嵌入成功”这种细节都没落下。看完这篇，再也不用为Flex嵌HTML的问题挠头，实用、详细、好懂，就是它的核心！
你有没有过在Flex项目里想加个HTML表单、在线测试页或者动态内容，结果捣鼓半天要么显示不出来，要么跨域报错的情况？我去年帮做教育类Flex课件的朋友解决过这个问题——他要在课件里嵌一个HTML在线测试页面，试了直接用Flex的HTMLLoader组件，结果要么样式乱掉，要么提交按钮没反应，最后用Flex IFrame搞定了，而且步骤其实没想象中复杂。今天就把我当时 的方法分享给你，不管你是刚接触Flex的新手，还是遇到瓶颈的老开发者，跟着走就能搞定“Flex嵌HTML”的问题。
先搞懂：Flex IFrame到底是啥，为什么能解决嵌入问题？
要讲Flex IFrame，得先说说Flex的“天生短板”——Flex是Flash的开发框架，主打富交互动画和复杂组件，但处理HTML内容天生弱。毕竟Flash和HTML是两个完全不同的技术栈：Flash用的是ActionScript，渲染靠自己的引擎；HTML用的是JS/CSS，渲染靠浏览器。你要是直接在Flex里写HTML，要么只能显示简单文本（比如用Label组件的htmlText属性），要么复杂内容（比如带JS的表单）根本跑不起来。
而Flex IFrame就是个“桥梁组件”——它把Flash和HTML之间的底层交互封装成了易用的组件，让你能在Flex应用里创建一个“HTML容器”，把HTML页面或代码塞进去，还能实现两者之间的交互（比如Flex按钮控制HTML内容，HTML操作触发Flex事件）。打个比方，它就像你在Flex里开了个“小浏览器窗口”，里面专门装HTML内容，而且这个“窗口”还能和Flex应用“对话”。
我当时帮朋友查资料的时候，看到Adobe官方文档里明确提到：Flex IFrame是处理Flex与HTML集成的推荐方案之一，尤其是需要复杂HTML内容（比如带JS交互、表单、动态加载内容）的场景（Adobe文档链接：nofollow）。它的底层原理其实是用Flash的StageWebView类（针对移动设备，比如AIR应用）或ExternalInterface（针对桌面端Flash Player）做支撑，但封装成了更易用的MXML组件——不用你自己写一堆原生ActionScript代码，只要拖组件、设属性就行。
举个例子，如果你要嵌一个带JS验证的HTML登录表单，用Flex的HTMLLoader组件肯定搞不定（因为HTMLLoader对JS的支持有限），但用Flex IFrame就能完美运行——它会调用系统的浏览器内核（比如桌面端用IE或Chrome，移动端用WebView）来渲染HTML，和你在浏览器里看页面的效果一模一样。
手把手教你用Flex IFrame：从配置到嵌入的全步骤
接下来进入实操环节，我会把“导入组件→写代码→解决常见坑”的全流程拆解开，每一步都配具体例子，你跟着做就行。
第一步：先把Flex IFrame组件“装进”你的项目里
要用量Flex IFrame，得先下载它的库文件——你可以去GitHub搜“Flex IFrame”，找星星多、更新较近的版本（比如org.helvector.iframe这个包，我朋友用的就是这个）。下载后会得到一个.swc文件（Flex的库文件格式），把它放进你Flex项目的libs文件夹里（如果没有libs文件夹就自己建一个）。
接下来要在MXML文件里导入命名空间——这步很关键，漏了就会报错。在你的主MXML文件（比如Main.mxml）的根标签里加一行：
xmlns:iframe="http://code.google.com/p/flex-iframe/"
比如你的根标签是，加完后应该是这样：
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:iframe="http://code.google.com/p/flex-iframe/">
我朋友当时就是漏了这行，结果在MXML里写的时候，编译器一直提示“未知组件”，折腾了半小时才发现问题——你可别犯同样的错。
第二步：两种嵌入场景——外部HTML页面&直接写HTML代码
Flex IFrame支持两种嵌入方式：嵌外部HTML页面（比如你服务器上的test.html）和直接写HTML代码（比如简单的标题+段落），我分别讲怎么操作。
场景1：嵌入外部HTML页面
如果你要嵌的是已经存在的HTML页面（比如在线表单、新闻页），直接用source属性指定URL就行。比如你要嵌http://www.yourserver.com/test.html，代码是这样的：
source="http://www.yourserver.com/test.html"
width="800"
height="600"
allowScriptAccess="true" />
这里要注意三个点：
test.html，得写全域名（http://开头），不然Flex会认为是本地文件，容易触发安全沙箱报错； false——如果你的HTML页面有JS交互（比如提交表单），一定要改成true，不然JS会被禁用； 800）或百分比（比如100%），如果用百分比，组件会自适应父容器的大小（比如父容器是VBox，设width="100%"就会占满父容器宽度）。 我朋友当时嵌的是公司服务器上的quiz.html测试页，一开始URL写成了/quiz.html（相对路径），结果显示“无法加载页面”，后来改成全URL就好了——记着，外部页面一定要用绝对路径！
场景2：直接嵌入HTML代码
如果你的HTML内容很简单（比如一个标题、一段说明文字），不用单独建HTML文件，可以用htmlText属性直接写代码。比如：
htmlText="这是直接嵌入的HTML内容
可以加样式、链接甚至简单JS"
width="400"
height="200" />
这里要注意转义特殊字符：比如HTML里的双引号（"）要改成"，不然MXML编译器会误以为是属性的结束符。比如你要写style="color:red;"，得改成style="color:red;"，不然会报错。我第一次用的时候没转义，结果编译器直接红了，还以为是组件坏了——后来查了文档才知道要转义，你可别踩这个坑。
第三步：解决最头疼的3个坑——跨域、尺寸、交互
嵌HTML的过程中，你大概率会遇到这三个问题：跨域报错、尺寸不对、Flex和HTML无法交互。我把解决方法整理好了，照着做就能搞定。
坑1：跨域报错——“安全沙箱冲突”怎么解决？
跨域是最常见的问题——比如你的Flex应用部署在a.com，要嵌的HTML页面在b.com，浏览器会因为“同源策略”阻止两者交互，Flex会报“安全沙箱冲突”的错。解决方法分两种情况：
flex-config.xml文件里加一行：true，允许Flash访问网络资源； app.xml）里加<access origin="">（.htaccess文件里加Header set Access-Control-Allow-Origin "http://www.yourflexapp.com"（把yourflexapp.com改成你Flex应用的域名），Nginx服务器在配置文件里加add_header Access-Control-Allow-Origin http://www.yourflexapp.com;。 我朋友当时的情况是：Flex课件部署在edu.yourcompany.com，HTML测试页在test.yourcompany.com——属于同个主域下的子域，所以他在HTML服务器的.htaccess里加了Header set Access-Control-Allow-Origin "http://edu.yourcompany.com"，问题直接解决了。
坑2：尺寸不对——HTML内容显示不全或撑破容器
解决尺寸问题的关键是用百分比代替固定像素。比如你要让Flex IFrame占满父容器的宽度和高度，可以这么写：
width="100%"
height="100%" />
这样不管父容器（比如VBox或Canvas）怎么 resize，Flex IFrame都会跟着变，里面的HTML内容也会自适应。我朋友当时的课件要适配平板和电脑，一开始用固定像素（width="800"），结果平板上显示不全，改成100%后就完美适配了。
如果你的HTML内容本身有固定尺寸（比如1000px宽），可以给Flex IFrame加scrolling="auto"属性——这样当HTML内容超过容器尺寸时，会自动显示滚动条，不会撑破容器。
坑3：Flex和HTML无法交互——按钮点了没反应？
要实现Flex和HTML的交互（比如Flex按钮控制HTML内容，HTML提交后传数据给Flex），得用Flex IFrame的两个核心方法：callJS()（Flex调用HTML的JS）和jsCallback事件（HTML调用Flex的方法）。
举个我朋友的例子：他要实现“HTML测试页提交后，把分数传给Flex课件显示”，步骤是这样的：
window.parent.flexIFrameCallback(score)（score是测试分数）； jsCallback事件监听器，代码是： source="http://www.yourserver.com/quiz.html"
jsCallback="handleJSCallback(event)" />
然后在ActionScript里写事件处理函数：
actionscriptprivate function handleJSCallback(event:IFrameJSCallbackEvent):void {
var score:String = event.data as String;
// 把分数显示在Flex课件里
scoreLabel.text = "你的得分是：" + score;
}
callJS()反过来，如果Flex要控制HTML内容（比如点击Flex按钮改变HTML里的文本），可以用
方法：
actionscript
// 点击Flex按钮后执行
private function onButtonClick():void {
myIFrame.callJS(“document.getElementById(‘resultDiv’).innerHTML = ‘测试通过！'”);
}
这里
resultDiv是HTML里的一个
的ID——你得确保HTML里有这个元素，不然会报错。我当时帮朋友测试的时候，他把resultDiv写成了resultDivv（多了个v），结果点按钮没反应，查了半天才发现拼写错了——细节很重要！
最后：给你一份“Flex IFrame常用属性表”，不用再翻文档
为了方便你快速查找，我把Flex IFrame最常用的属性整理成了表格，直接对照用就行：
| 属性名 | 作用 | 示例值 |
|---|---|---|
| source | 要嵌入的HTML页面URL | http://www.yourserver.com/test.html |
| htmlText | 直接嵌入的HTML代码 |
测试内容
|
| width/height | 组件尺寸（支持像素/百分比） | 100%/600 |
| allowScriptAccess | 是否允许HTML的JS访问Flex | true |
| scrolling | 是否显示滚动条（auto/yes/no） | auto |
你要是按这些步骤试了，遇到问题可以留言告诉我——比如跨域还是解决不了，或者交互没反应，我帮你看看；要是成功了，也欢迎回来分享你的场景，比如你用Flex IFrame嵌了什么HTML内容？比如电商Flex应用里的商品详情页？还是教育课件里的互动题？
本文常见问题（FAQ）
Flex IFrame组件怎么加到我的Flex项目里呀？
首先你得去GitHub找Flex IFrame的.swc库文件（比如org.helvector.iframe这个包），下载完放进项目的libs文件夹里——没有libs文件夹就自己建一个。然后在MXML根标签（比如）里加命名空间：xmlns:iframe=”http://code.google.com/p/flex-iframe/”，这步不能漏，不然编译器会不认识组件。我朋友之前就是漏了命名空间，结果组件一直报错，后来加上就好了。
要是你找不到合适的.swc文件，也可以搜Adobe官方推荐的Flex IFrame库，一般都有明确的下载和安装说明，跟着做就行。
直接写HTML代码和嵌外部页面有啥不一样？分别适合啥场景？
直接写HTML代码用的是Flex IFrame的htmlText属性，适合内容简单的情况（比如一段带样式的文字、一个小链接），但要注意转义特殊字符——比如双引号得改成"，不然会报错。我第一次用的时候没转义，结果编译器直接红了，后来查文档才弄明白。
嵌外部页面用source属性，适合复杂内容（比如带JS的表单、动态加载的页面），但得用绝对路径（比如http://www.yourserver.com/test.html），不能用相对路径，不然会加载失败。我朋友之前嵌测试页的时候用了相对路径，结果显示不出来，改成全URL就好了。
嵌外部HTML页面时跨域报错怎么办？
跨域问题分三种情况解决：要是桌面端Flash应用，在flex-config.xml里加true；要是移动端AIR应用，在app.xml里加（生产环境 改成具体域名，比如你的Flex应用域名）；要是HTML页面所在的服务器，得加CORS头——Apache服务器在.htaccess里加Header set Access-Control-Allow-Origin “你的Flex应用域名”，Nginx的话在配置文件里加add_header Access-Control-Allow-Origin 你的Flex应用域名;。
我朋友当时是同个主域下的子域（Flex在edu.yourcompany.com，HTML在test.yourcompany.com），就在HTML服务器的.htaccess里加了允许edu域名访问的头，问题直接解决了。
Flex IFrame里的HTML内容显示不全或者撑破容器咋解决？
最直接的方法是用百分比设置尺寸——把Flex IFrame的width和height改成100%，这样组件会自适应父容器的大小，里面的HTML内容也能跟着适配。我朋友之前用固定像素（比如width=”800″），结果平板上显示不全，改成100%后就完美了。
要是HTML内容本身有固定尺寸（比如1000px宽），可以给Flex IFrame加scrolling=”auto”属性，这样内容超过容器时会自动显示滚动条，不会撑破容器。
Flex和嵌入的HTML页面能互相调用方法吗？怎么弄？
可以的，主要用两个方法：Flex调用HTML的JS用callJS()，比如你点Flex按钮想改HTML里的文本，就写myIFrame.callJS(“document.getElementById(‘resultDiv’).innerHTML = ‘测试通过！'”)；HTML调用Flex的方法用jsCallback事件——先在HTML里用JS写window.parent.flexIFrameCallback(数据)（比如测试分数），然后在Flex的MXML里给IFrame加jsCallback=”handleJSCallback(event)”，再在ActionScript里写事件处理函数接收数据。
我朋友之前做课件的时候，就是用这个方法把HTML测试页的分数传给Flex显示的，步骤不难，就是得注意拼写——比如HTML里的元素ID别写错，不然调用不到。
