首页 > > 网页制作 > Flash >

在Flex中嵌入完整HTML页面

2008-04-02 10:50:45来源：互联网阅读 ()

　　有时候我们需要在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和HTML javascript的相互交互，进一步的，假如要在Flex应用中嵌入完整的HTML呢？

　　其实实现的方法很简单，只需要使用HTML的Iframe标签来导入需嵌入的HTML页面，

　　然后使用ExternalInterface调用相应的javasript将该Iframe移动到我们Flex页面需要嵌入HTML页面的部分之上就能够了，示意图如下：

　　在Flex中嵌入完整HTML页面

　　也就是说，我们包含Flex SWF文档的HTML页面主要有三个部分：

　　1、Flex swf 插件容器，FlexBuilder自动生成部分

　　

<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

　　id="IFrameDemo"width="100%"height="100%"

　　codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">

　　<paramname="movie"value="IFrameDemo.swf"/>

　　<paramname="quality"value="high"/>

　　<paramname="bgcolor"value="#869ca7"/>

　　<embedsrc="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页面

　　

<iframeid="myFrame"name="myFrame"frameborder="0"

　　style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"/>

　　3、移动Iframe和在Iframe中导入需嵌入FLEX中的HTML页面的脚本

　　

　　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端代码:

　　<?xmlversion="1.0"encoding="utf-8"?>

　　<mx:Canvasxmlns:mx="http://www.macromedia.com/2005/mxml"

　　resize="callLater(moveIFrame)"

　　move="callLater(moveIFrame)">

　　<mx:Script>

　　<![CDATA[

　　importflash.external.ExternalInterface;

　　importflash.geom.Point;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有