Flex中怎么嵌入完整HTML頁(yè)面

Flex中怎么嵌入完整HTML頁(yè)面，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

在Flex中嵌入完整HTML頁(yè)面

有時(shí)候我們需要在Flex應(yīng)用中嵌入HTML代碼，根據(jù)嵌入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應(yīng)用嵌入到HTML頁(yè)面中，然后通過Flex2中的ExternalInterface(Flex1.5使用getURL("javascript:javascriptMethod"))

來實(shí)現(xiàn)Flex與HTMLjavascript的相互交互，進(jìn)一步的，如果要在Flex應(yīng)用中嵌入完整的HTML呢？

其實(shí)實(shí)現(xiàn)的方法很簡(jiǎn)單，只需要使用HTML的Iframe標(biāo)簽來導(dǎo)入需嵌入的HTML頁(yè)面，然后使用ExternalInterface調(diào)用相應(yīng)的javasript將該Iframe移動(dòng)到我們Flex頁(yè)面需要嵌入HTML頁(yè)面的部分之上就可以了，示意圖如下：

也就是說，我們包含F(xiàn)lexSWF文件的HTML頁(yè)面主要有三個(gè)部分：

1、Flexswf插件容器，F(xiàn)lexBuilder自動(dòng)生成部分

<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標(biāo)簽,絕對(duì)定位，用來導(dǎo)入HTML頁(yè)面

<iframeidiframeid="myFrame"name="myFrame"frameborder="0" style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"/>

3、移動(dòng)Iframe和在Iframe中導(dǎo)入需嵌入FLEX中的HTML頁(yè)面的腳本

<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中的導(dǎo)入Iframe頁(yè)面和移動(dòng)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);  }  }

兩個(gè)方法分別直接調(diào)用使用ExternalInterface.call調(diào)用前面我們提到的HTML頁(yè)面上的兩個(gè)Javascript方法。另外一個(gè)要注意的是<Canvas/>
繼承自flash.display.DisplayObject類的localToGlobal方法的使用，該方法將基于Flash場(chǎng)景的坐標(biāo)轉(zhuǎn)換為基于全局本地坐標(biāo)，也就是瀏覽器頁(yè)面坐標(biāo)：

//Flash場(chǎng)景0,0坐標(biāo)varlocalPt:Point=newPoint(0,0);//轉(zhuǎn)換為瀏覽器頁(yè)面坐標(biāo)varglobalPt:Point=this.localToGlobal(localPt);
這樣就可以在Flex頁(yè)面中嵌入任意的HTML頁(yè)面了，為了方便，Brian寫了個(gè)嵌入HTML頁(yè)面的代理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&rsquo;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組件有個(gè)source屬性用來記錄需要載入的嵌入HTML頁(yè)面的地址，每次source屬性更新時(shí)，調(diào)用ExternalInterface.call("loadIFrame",source)
調(diào)用javascript方法loadIFrame方法在HTML頁(yè)面中的IFrame中載入要嵌入的HTML頁(yè)面。
另外，重載了Canvas的visible屬性，以便在Canvas隱藏HTML頁(yè)面中的IFrame。
如下使用該組件在Flex應(yīng)用中嵌入HTML頁(yè)面方法：

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

看完上述內(nèi)容，你們掌握Flex中怎么嵌入完整HTML頁(yè)面的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！