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

开发 后端
本文向大家介绍一下在Flex中如何嵌入完整HTML页面,有时候我们需要在Flex应用中嵌入HTML代码,根据嵌入HTML要求的不同有不同的方法。

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

在Flex中嵌入完整HTML页面

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

1、Flex文本组件(Label、Text、TextArea)的htmlText属性支持一些基本的HTML代码,例如:

  1. <mx:TextArea> 
  2. <mx:htmlText> 
  3. <![CDATA[  
  4. <palign="center"><fontsize="15"color="#3399ff">  
  5. thisisahtmlcode</font></p>  
  6. ]]> 
  7. </mx:htmlText> 
  8. </mx:TextArea> 
  9.  

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

  1. <objectclassidobjectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
  2. id="IFrameDemo"width="100%"height="100%" 
  3. codebase="http://download.macromedia.com/pub/shockwave/  
  4. cabs/flash/swflash.cab"> 
  5. <paramnameparamname="movie"value="IFrameDemo.swf"/> 
  6. <paramnameparamname="quality"value="high"/> 
  7. <paramnameparamname="bgcolor"value="#869ca7"/> 
  8. <embedsrcembedsrc="IFrameDemo.swf"quality="high"bgcolor="#869ca7" 
  9. width="100%"height="100%"name="detectiontest" 
  10. aligh="middle" 
  11. play="true"loop="false"quality="high" 
  12. allowScriptAccess="sameDomain" 
  13. type="application/x-shockwave-flash" 
  14. wmode="opaque" 
  15. swLiveConnect="true" 
  16. pluginspage="http://www.macromedia.com/go/getflashplayer"> 
  17. </embed> 
  18. </object> 
  19.  

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

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

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

  1. <script> 
  2. functionmoveIFrame(x,y,w,h){  
  3. varframeRef=document.getElementById("myFrame");  
  4. frameRef.style.left=x;  
  5. frameRef.style.top=y;  
  6. frameRef.width=w;  
  7. frameRef.height=h;  
  8. }  
  9. functionloadIFrame(url){  
  10. top.frames["myFrame"].location.href=url;  
  11. }  
  12. </script> 
  13.  

 Flex中的导入Iframe页面和移动Iframe的代码如下:

  1. importflash.external.ExternalInterface;  
  2. importflash.geom.Point;  
  3. importflash.net.navigateToURL;  
  4. privatevar__source:String;  
  5. privatefunctionmoveIFrame():void{  
  6. varlocalPt:Point=newPoint(0,0);  
  7. varglobalPt:Point=this.localToGlobal(localPt);  
  8. ExternalInterface.call("moveIFrame",globalPt.x,globalPt.y,this.width,this.  
  9. height);  
  10. }  
  11. publicfunctionsetsource(source:String):void{  
  12. if(source){  
  13. if(!ExternalInterface.available)  
  14. {  
  15. //TODO:determineifthisErrorisactuallyneeded.Thedebugger  
  16. //buildgivestheerrorbelow.Assumingthatthiserrorwillnotshow  
  17. //upinthereleasebuildbuthaven’tchecked.  
  18. thrownewError("TheExternalInterfaceisnotavailableinthiscontainer.  
  19. InternetExplorerActiveX,  
  20. Firefox,Mozilla1.7.5andgreater,orotherbrowsersthatsupportNPRuntimearerequired.");  
  21. }  
  22. __source=source;  
  23. ExternalInterface.call("loadIFrame",source);  
  24. }  
  25. }  

#p#两个方法分别直接调用使用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端代码:
 

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2. <mx:Canvasxmlns:mxmx:Canvasxmlns:mx="http://www.macromedia.com/2005/mxml" 
  3. resize="callLater(moveIFrame)" 
  4. move="callLater(moveIFrame)"> 
  5. <mx:Script> 
  6. <![CDATA[  
  7. importflash.external.ExternalInterface;  
  8. importflash.geom.Point;  
  9. importflash.net.navigateToURL;  
  10. privatevar__source:String;  
  11. privatefunctionmoveIFrame():void{  
  12. varlocalPt:Point=newPoint(0,0);  
  13. varglobalPt:Point=this.localToGlobal(localPt);  
  14. ExternalInterface.call("moveIFrame",globalPt.x,globalPt.y,this.width,this.height);  
  15. }  
  16. publicfunctionsetsource(source:String):void{  
  17. if(source){  
  18. if(!ExternalInterface.available)  
  19. {  
  20. //TODO:determineifthisErrorisactuallyneeded.Thedebugger  
  21. //buildgivestheerrorbelow.Assumingthatthiserrorwillnotshow  
  22. //upinthereleasebuildbuthaven’tchecked.  
  23. thrownewError("TheExternalInterfaceisnotavailableinthiscontainer.
  24. InternetExplorerActiveX,Firefox,  
  25. Mozilla1.7.5andgreater,orotherbrowsersthatsupportNPRuntimearerequired.");  
  26. }  
  27. __source=source;  
  28. ExternalInterface.call("loadIFrame",source);  
  29. }  
  30. }  
  31. publicfunctiongetsource():String{  
  32. return__source;  
  33. }  
  34. overridepublicfunctionsetvisible(visible:Boolean):void{  
  35. super.visible=visible;  
  36. if(visible)  
  37. {  
  38. ExternalInterface.call("showIFrame");  
  39. }  
  40. else  
  41. {  
  42. ExternalInterface.call("hideIFrame");  
  43. }  
  44. }  
  45.  
  46. ]]> 
  47. </mx:Script> 
  48. </mx:Canvas> 
  49.  

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

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


 

【编辑推荐】

  1. 技术前沿 Flex2.0 从零开始实现文件上传
  2. FlexBuilder4十大新特性闪亮登场
  3. 学习总结 在Flex中如何嵌入Flex字体
  4. 揭开Flex正则表达式的神秘面纱
  5. Flex自动化功能测试工具SilkTest用法指导 

 

 

责任编辑:佚名 来源: webjx.com
相关推荐

2010-08-09 09:09:43

Flex技术

2010-07-29 09:08:20

Flex客户端缓存

2010-08-09 12:59:15

Flex4beta

2010-08-09 13:05:24

Flex4beta

2010-07-30 15:35:11

Flex结合

2010-08-10 15:38:32

Flex2.0

2010-08-10 14:08:09

Flex嵌入字体

2010-08-11 12:50:04

Flex4

2010-06-30 16:52:23

UML数据建模

2010-07-29 17:26:54

Flex富客户端技术

2010-09-08 14:09:35

切换CSS

2010-09-27 15:26:17

JVM for Lin

2014-08-08 15:36:39

Apdex

2010-08-09 15:30:00

Flex字体

2010-08-09 15:41:13

Flex字体

2010-08-10 13:04:27

FlexBuilder

2021-07-09 12:37:31

GoPython编程语言

2010-08-04 16:24:08

FlexSDK4

2022-06-28 09:01:26

RSSFeedlyCommafeed

2010-08-05 13:07:11

FlexJson
点赞
收藏

51CTO技术栈公众号