技术前沿 如何在Flex中嵌入完整HTML页面
Flex有很多值得学习的地方，本文和大家重点讨论一下如何在Flex中嵌入完整HTML页面，有时候我们需要在Flex应用中嵌入HTML代码，根据嵌入HTML要求的不同有两种方法，请看下文详细介绍。
在Flex中嵌入完整HTML页面
有时候我们需要在Flex应用中嵌入HTML代码，根据嵌入HTML要求的不同有以下两种方法：
1、Flex文本组件（Label、Text、TextArea）的htmlText属性支持一些基本的HTML代码，例如：
<mx:TextArea> <mx:htmlText> <![CDATA[ <palign="center"><fontsize="15"color="#3399ff"> thisisahtmlcode</font></p> ]]> </mx:htmlText> </mx:TextArea>
2、我们可以将Flex应用嵌入到HTML页面中，然后通过Flex2中的ExternalInterface(Flex1.5使用getURL("javascript:javascriptMethod"))
来实现Flex与HTMLjavascript的相互交互，进一步的，如果要在Flex应用中嵌入完整的HTML呢？
其实实现的方法很简单，只需要使用HTML的Iframe标签来导入需嵌入的HTML页面，然后使用ExternalInterface调用相应的javasript将该Iframe移动到我们Flex页面需要嵌入HTML页面的部分之上就可以了，示意图如下：
也就是说，我们包含FlexSWF文件的HTML页面主要有三个部分：
1、Flexswf插件容器，FlexBuilder自动生成部分
<objectclassidobjectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="IFrameDemo"width="100%"height="100%" codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab"> <paramnameparamname="movie"value="IFrameDemo.swf"/> <paramnameparamname="quality"value="high"/> <paramnameparamname="bgcolor"value="#869ca7"/> <embedsrcembedsrc="IFrameDemo.swf"quality="high"bgcolor="#869ca7" width="100%"height="100%"name="detectiontest" aligh="middle" play="true"loop="false"quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" wmode="opaque" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object>
2、HTMLIframe标签,绝对定位，用来导入HTML页面
<iframeidiframeid="myFrame"name="myFrame"frameborder="0" style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"/>
3、移动Iframe和在Iframe中导入需嵌入FLEX中的HTML页面的脚本
<script>
functionmoveIFrame(x,y,w,h){
varframeRef=document.getElementById("myFrame");
frameRef.style.left=x;
frameRef.style.top=y;
frameRef.width=w;
frameRef.height=h;
}
functionloadIFrame(url){
top.frames["myFrame"].location.href=url;
}
</script>
Flex中的导入Iframe页面和移动Iframe的代码如下：
importflash.external.ExternalInterface;
importflash.geom.Point;
importflash.net.navigateToURL;
privatevar__source:String;
privatefunctionmoveIFrame():void{
varlocalPt:Point=newPoint(0,0);
varglobalPt:Point=this.localToGlobal(localPt);
ExternalInterface.call("moveIFrame",globalPt.x,globalPt.y,this.width,this.
height);
}
publicfunctionsetsource(source:String):void{
if(source){
if(!ExternalInterface.available)
{
//TODO:determineifthisErrorisactuallyneeded.Thedebugger
//buildgivestheerrorbelow.Assumingthatthiserrorwillnotshow
//upinthereleasebuildbuthaven’tchecked.
thrownewError("TheExternalInterfaceisnotavailableinthiscontainer.
InternetExplorerActiveX,
Firefox,Mozilla1.7.5andgreater,orotherbrowsersthatsupportNPRuntimearerequired.");
}
__source=source;
ExternalInterface.call("loadIFrame",source);
}
} 两个方法分别直接调用使用ExternalInterface.call调用前面我们提到的HTML页面上的两个Javascript方法。另外一个要注意的是<Canvas/>
继承自flash.display.DisplayObject类的localToGlobal方法的使用，该方法将基于Flash场景的坐标转换为基于全局本地坐标，也就是浏览器页面坐标：
//Flash场景0,0坐标varlocalPt:Point=newPoint(0,0);//转换为浏览器页面坐标varglobalPt:Point=this.localToGlobal(localPt);
这样就可以在Flex页面中嵌入任意的HTML页面了，为了方便，Brian写了个嵌入HTML页面的代理IFrame组件，该组件封装了所有需要的Flex端代码:
<?xmlversionxmlversion="1.0"encoding="utf-8"?>
<mx:Canvasxmlns:mxmx:Canvasxmlns:mx="http://www.macromedia.com/2005/mxml"
resize="callLater(moveIFrame)"
move="callLater(moveIFrame)">
<mx:Script>
<![CDATA[
importflash.external.ExternalInterface;
importflash.geom.Point;
importflash.net.navigateToURL;
privatevar__source:String;
privatefunctionmoveIFrame():void{
varlocalPt:Point=newPoint(0,0);
varglobalPt:Point=this.localToGlobal(localPt);
ExternalInterface.call("moveIFrame",globalPt.x,globalPt.y,this.width,this.height);
}
publicfunctionsetsource(source:String):void{
if(source){
if(!ExternalInterface.available)
{
//TODO:determineifthisErrorisactuallyneeded.Thedebugger
//buildgivestheerrorbelow.Assumingthatthiserrorwillnotshow
//upinthereleasebuildbuthaven’tchecked.
thrownewError("TheExternalInterfaceisnotavailableinthiscontainer.
InternetExplorerActiveX,Firefox,
Mozilla1.7.5andgreater,orotherbrowsersthatsupportNPRuntimearerequired.");
}
__source=source;
ExternalInterface.call("loadIFrame",source);
}
}
publicfunctiongetsource():String{
return__source;
}
overridepublicfunctionsetvisible(visible:Boolean):void{
super.visible=visible;
if(visible)
{
ExternalInterface.call("showIFrame");
}
else
{
ExternalInterface.call("hideIFrame");
}
}
]]>
</mx:Script>
</mx:Canvas>
该IFrame组件有个source属性用来记录需要载入的嵌入HTML页面的地址，每次source属性更新时，调用ExternalInterface.call("loadIFrame",source)
调用javascript方法loadIFrame方法在HTML页面中的IFrame中载入要嵌入的HTML页面。
另外，重载了Canvas的visible属性，以便在Canvas隐藏HTML页面中的IFrame。
如下使用该组件在Flex应用中嵌入HTML页面方法：