网站建设资讯

NEWS

网站建设资讯

Flex中怎么嵌入完整HTML页面

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

我们提供的服务有:成都做网站、成都网站建设、成都外贸网站建设、微信公众号开发、网站优化、网站认证、保靖ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的保靖网站制作公司

在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页面的部分之上就可以了,示意图如下:

Flex中怎么嵌入完整HTML页面

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

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

      

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

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方法。另外一个要注意的是
继承自flash.display.DisplayObject类的localToGlobal方法的使用,该方法将基于Flash场景的坐标转换为基于全局本地坐标,也就是浏览器页面坐标:

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

     

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

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


本文名称:Flex中怎么嵌入完整HTML页面
本文路径:http://njwzjz.com/article/jspcsc.html