文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Flex中怎么嵌入完整HTML页面

2023-06-17 15:02

关注

Flex中怎么嵌入完整HTML页面,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

在Flex中嵌入完整HTML页面

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

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

<mx:TextArea> <mx:htmlText> <![CDATA[  <palign="center"><fontsize="15"color="#3399ff">  thisisahtmlcode</font></p>  ]]> </mx:htmlText> </mx:TextArea>

我们可以将Flex应用嵌入到HTML页面中,然后通过Flex2中的ExternalInterface(Flex1.5使用getURL("javascript:javascriptMethod"))

来实现Flex与HTMLjavascript的相互交互,进一步的,如果要在Flex应用中嵌入完整的HTML呢?

其实实现的方法很简单,只需要使用HTML的Iframe标签来导入需嵌入的HTML页面,然后使用ExternalInterface调用相应的javasript将该Iframe移动到我们Flex页面需要嵌入HTML页面的部分之上就可以了,示意图如下:

Flex中怎么嵌入完整HTML页面

也就是说,我们包含FlexSWF文件的HTML页面主要有三个部分:

Flexswf插件容器,FlexBuilder自动生成部分

<objectclassidobjectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="IFrameDemo"width="100%"height="100%" codebase="http://download.macromedia.com/pub/shockwave/  cabs/flash/swflash.cab"> <paramnameparamname="movie"value="IFrameDemo.swf"/> <paramnameparamname="quality"value="high"/> <paramnameparamname="bgcolor"value="#869ca7"/> <embedsrcembedsrc="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>

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

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

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

<script> functionmoveIFrame(x,y,w,h){  varframeRef=document.getElementById("myFrame");  frameRef.style.left=x;  frameRef.style.top=y;  frameRef.width=w;  frameRef.height=h;  }  functionloadIFrame(url){  top.frames["myFrame"].location.href=url;  }  </script>

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

<?xmlversionxmlversion="1.0"encoding="utf-8"?> <mx:Canvasxmlns:mxmx:Canvasxmlns:mx="http://www.macromedia.com/2005/mxml" resize="callLater(moveIFrame)" move="callLater(moveIFrame)"> <mx:Script> <![CDATA[  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&rsquo;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");  }  }   ]]> </mx:Script> </mx:Canvas>

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

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

看完上述内容,你们掌握Flex中怎么嵌入完整HTML页面的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯