技术前沿如何在Flex中嵌入完整HTML页面-ue4嵌入web页面交互

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);  
}  
}

#p#两个方法分别直接调用使用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页面方法：

<IFrameidIFrameid="iFrame"source="http://blog.eshangrao.com"width="300"height="400"/>

【编辑推荐】

技术前沿 如何在Flex中嵌入完整HTML页面

技术前沿如何在Flex中嵌入完整HTML页面