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

Flex有很多值得学习的地方，本文和大家重点讨论一下如何在Flex中嵌入完整HTML页面，有时候我们需要在Flex应用中嵌入HTML代码，根据嵌入HTML要求的不同有两种方法，请看下文详细介绍。

目前创新互联公司已为成百上千家的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器托管、企业网站设计、沅江网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

在Flex中嵌入完整HTML页面

有时候我们需要在Flex应用中嵌入HTML代码，根据嵌入HTML要求的不同有以下两种方法：

1、Flex文本组件（Label、Text、TextArea）的htmlText属性支持一些基本的HTML代码，例如：

 
 
 
 
  
  
  
   
  
  
  
   
  
  
  
  
  
  
  
  
  
  
  
  
  thisisahtmlcode
  
  
  
  
  ]]>

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自动生成部分

 
 
 
 
  
  
  
  
  
  
  
  
id="IFrameDemo"width="100%"height="100%" 
  
  
  
  codebase="http://download.macromedia.com/pub/shockwave/  
  
  
  
  cabs/flash/swflash.cab"> 
  
  
  
   
  
  
  
   
  
  
  
   
  
  
  
  
  
  
  
  
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">

2、HTMLIframe标签,绝对定位，用来导入HTML页面

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

#p#两个方法分别直接调用使用ExternalInterface.call调用前面我们提到的HTML页面上的两个Javascript方法。另外一个要注意的是

//Flash场景0,0坐标varlocalPt:Point=newPoint(0,0);//转换为浏览器页面坐标varglobalPt:Point=this.localToGlobal(localPt);
这样就可以在Flex页面中嵌入任意的HTML页面了，为了方便，Brian写了个嵌入HTML页面的代理IFrame组件，该组件封装了所有需要的Flex端代码:

 
 
 
 
  
  
  
   
  
  
  
  
  
  
  
  
resize="callLater(moveIFrame)" 
  
  
  
  move="callLater(moveIFrame)"> 
  
  
  
   
  
  
  
  
  
  
  
  
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");  
  
  
  
  }  
  
  
  
  }  
  
  
  
   
  
  
  
  ]]>

该IFrame组件有个source属性用来记录需要载入的嵌入HTML页面的地址，每次source属性更新时，调用ExternalInterface.call("loadIFrame",source)
调用javascript方法loadIFrame方法在HTML页面中的IFrame中载入要嵌入的HTML页面。
另外，重载了Canvas的visible属性，以便在Canvas隐藏HTML页面中的IFrame。
如下使用该组件在Flex应用中嵌入HTML页面方法：

分享文章：技术前沿如何在Flex中嵌入完整HTML页面
网页URL：http://www.hantingmc.com/qtweb/news47/305547.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容