flex嵌入完整html

有時候我們需要在Flex應用中嵌入HTML代碼，根據嵌入HTML要求的不同有以下兩種方法：
1、Flex文本組件（Label、Text、TextArea）的htmlText屬性支持一些基本的HTML代碼，例如：

<mx:TextArea>
<mx:htmlText>
<![CDATA[
<p align="center"><font size="15" color="#3399ff">this is a html code</font></p>
]]>
</mx:htmlText>
</mx:TextArea>
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自動生成部分

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="IFrameDemo" width="100%" height="100%"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="IFrameDemo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<embed src="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、HTML Iframe標籤,絕對定位，用來導入HTML頁面

<iframe id="myFrame" name="myFrame" frameborder="0"
style="position:absolute;background-color:transparent;border:0px;visibility:hidden;" />
3、移動Iframe和在Iframe中導入需嵌入FLEX中的HTML頁面的腳本

<script>
function moveIFrame(x,y,w,h) {
var frameRef=document.getElementById("myFrame");
frameRef.style.left=x;
frameRef.style.top=y;
frameRef.width=w;
frameRef.height=h;
}
function loadIFrame(url){
top.frames["myFrame"].location.href=url;
}
</script>
Flex中的導入Iframe頁面和移動Iframe的代碼如下：

import flash.external.ExternalInterface;
import flash.geom.Point;
import flash.net.navigateToURL;
private var __source: String;
private function moveIFrame(): void {
var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);
ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
}
public function set source(source: String): void {
if (source) {
if (! ExternalInterface.available)
{
// TODO: determine if this Error is actually needed. The debugger
// build gives the error below. Assuming that this error will not show
// up in the release build but haven’t checked.
throw new Error("The ExternalInterface is not available in this container. Internet Explorer ActiveX,
Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
}
__source = source;
ExternalInterface.call("loadIFrame", source);
}
}
兩個方法分別直接調用使用ExternalInterface.call調用前面我們提到的HTML頁面上的兩個Javascript方法。另外一個要注意的是<Canvas/>
繼承自flash.display.DisplayObject類的localToGlobal方法的使用，該方法將基於Flash場景的座標轉換爲基於全局本地座標，也就是瀏覽器頁面座標：

//Flash場景0,0座標 var localPt:Point = new Point(0, 0); //轉換爲瀏覽器頁面座標 var globalPt:Point = this.localToGlobal(localPt);
這樣就可以在Flex頁面中嵌入任意的HTML頁面了，爲了方便，Brian寫了個嵌入HTML頁面的代理IFrame組件，該組件封裝了所有需要的Flex端代碼:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2005/mxml"
resize="callLater(moveIFrame)"
move="callLater(moveIFrame)">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import flash.geom.Point;
import flash.net.navigateToURL;
private var __source: String;
private function moveIFrame(): void {
var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);
ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
}
public function set source(source: String): void {
if (source) {
if (! ExternalInterface.available)
{
// TODO: determine if this Error is actually needed. The debugger
// build gives the error below. Assuming that this error will not show
// up in the release build but haven’t checked.
throw new Error("The ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox,
Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
}
__source = source;
ExternalInterface.call("loadIFrame", source);
}
}
public function get source(): String {
return __source;
}
override public function set visible(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頁面方法：

<IFrame id="iFrame" source="http://blog.eshangrao.com" width="300" height="400" />
以上代碼將在我們的Flex應用中嵌入本站首頁。

IFrameDemo.zip