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"
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.getElementByIdx_x_x("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應用中嵌入本站首頁。