在flash(flex)中嵌入完整HTML页面

 有时候我们需要在Flex应用中嵌入HTML代码,根据嵌入HTML要求的不同有以下两种方法:
    1、Flex文本组件(Label、Text、TextArea)的htmlText属性支持一些基本的HTML代码,例如:

<mx:TextArea> 
 <mx:htmlText> 
   <![CDATA[ 
     <p align="center"><font size="15" color="#3399ff">this is a html code</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 SWF文件的HTML页面主要有三个部分:
1、Flex swf 插件容器,FlexBuilder自动生成部分

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
   id="IFrameDemo" width="100%" height="100%"  
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">  
     <param name="movie" value="http://www.7880.com/Info/IFrameDemo.swf" /> 
     <param name="quality" value="high" /> 
     <param name="bgcolor" value="#869ca7" /> 
     <embed src="/Files/BeyondPic/图形图像/2006-12/4/0612405352838399.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页面

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

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

<script> 
function moveIFrame(x,y,w,h) { 
   var frameRef=document.getElementById("myFrame"); 
   frameRef.style.left=x; 
   frameRef.style.top=y; 
   frameRef.width=w; 
   frameRef.height=h; 

function loadIFrame(url){ 
  top.frames["myFrame"].location.href=url; 

</script> 
 
注:关键点,系统产生的html页面需要手动加入上述代码,否则没有效果,许多朋友看不到实例效果就是这个原因。

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

import flash.external.ExternalInterface; 
import flash.geom.Point; 
import flash.net.navigateToURL; 
private var __source: String; 
private function moveIFrame(): void { 
   var localPt:Point = new Point(0, 0); 
   var globalPt:Point = this.localToGlobal(localPt); 
   ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height); 

public function set source(source: String): void { 
   if (source) { 
       if (! ExternalInterface.available) 
       { 
        // TODO: determine if this Error is actually needed.  The debugger  
        // build gives the error below.  Assuming that this error will not show 
        // up in the release build but haven’t checked. 
           throw new Error("The ExternalInterface is not available in this container. Internet Explorer ActiveX,
    Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required."); 
       } 
       __source = source; 
       ExternalInterface.call("loadIFrame", source); 
   } 

    两个方法分别直接调用使用ExternalInterface.call调用前面我们提到的HTML页面上的两个Javascript方法。另外一个要注意的是<Canvas/>
继承自flash.display.DisplayObject类的localToGlobal方法的使用,该方法将基于Flash场景的坐标转换为基于全局本地坐标,也就是浏览器页面坐标:

//Flash场景0,0坐标 var localPt:Point = new Point(0, 0); //转换为浏览器页面坐标 var globalPt:Point = this.localToGlobal(localPt); 
这样就可以在Flex页面中嵌入任意的HTML页面了,为了方便,Brian写了个嵌入HTML页面的代理IFrame组件,该组件封装了所有需要的Flex端代码: 
<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.macromedia.com/2005/mxml" 
   resize="callLater(moveIFrame)" 
   move="callLater(moveIFrame)"> 
   <mx:Script> 
   <![CDATA[ 
       import flash.external.ExternalInterface; 
       import flash.geom.Point; 
       import flash.net.navigateToURL; 
       private var __source: String; 
       private function moveIFrame(): void { 
          var localPt:Point = new Point(0, 0); 
           var globalPt:Point = this.localToGlobal(localPt); 
           ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height); 
       } 
       public function set source(source: String): void { 
           if (source) { 
              if (! ExternalInterface.available) 
               { 
                // TODO: determine if this Error is actually needed.  The debugger  
                // build gives the error below.  Assuming that this error will not show 
                // up in the release build but haven’t checked. 
                   throw new Error("The ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox,
     Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required."); 
               } 
               __source = source; 
               ExternalInterface.call("loadIFrame", source); 
           } 
       } 
       public function get source(): String { 
           return __source; 
       } 
       override public function set visible(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页面方法:

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

效果如下: 

我做的实例文件:点击下载此文件




[本日志由 techmango 于 2009-01-21 08:56 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: flash Flex iframe
109
评论: 21 | 引用: 0 | 查看次数: -
回复回复iframe[2010-07-17 04:14 PM | del]
我也是MDIWindow里面放入iframe  嵌入html页面,现在问题是最下面的页面,总被上面的挡住了。。我按照你那样setChailIndex 没用,还是挡住了。。问下还有什么办法能解决么?QQ378601345
回复回复yuanjing[2010-07-12 11:31 AM | del]
为什么我的不能正确的显示出来呢?不能将html页面加载成功,能不能和你交流一下呢,我的q:395731847,谢谢
回复回复graber[2010-06-21 10:15 PM | del]
为什么用鼠标点下网页页面,在移到bar上面,所有的网页部分会隐藏,但稍微滚动鼠标又显示出来,为什么?
回复来自 techmango 的评论 techmango 于 2010-06-22 11:34 AM 回复
这是很正常的.
1.你在任何浏览器的底部点击链接,页面载入肯定会移动bar(顶部).
2.你所说的网页部分会隐藏的现象,其实是因为页面中的某些内容还没有加载完毕,所以没有显示出来.
回复回复zy[2009-07-15 02:40 PM | del]
下载不了啊,可以发到我邮箱里吗
zhangyuan_strive@yahoo.com
回复来自 techmango 的评论 techmango 于 2009-07-16 09:05 PM 回复
回复回复gsion[2009-07-14 10:16 PM | del]
文件不能下,可否mail到GSION@126.COM
回复回复11[2009-05-31 07:20 PM | del]
如果用鼠标点下嵌入的html页,再点击panel边框  html页会隐藏 有办法解决吗 ?

回复来自 techmango 的评论 techmango 于 2009-06-01 08:55 AM 回复
不好意思,我真的想像不出来你说的这种情况,请说具体点,最好有图示.
回复回复wgj111[2009-05-18 03:16 PM | del]
文件下不来了,还望帮忙。我的邮箱wangguijiang111@163.com。
  
   谢谢了!
回复回复浪子[2009-04-18 05:40 PM | del]
嵌入的HTML成了最上层,覆盖了其他的组件,比如菜单,Alert.show("ceshi")弹出窗口等。请问如何解决?
回复来自 techmango 的评论 techmango 于 2009-04-19 11:26 PM 回复
flex有个内置函数可用来调整层的位置,用法如下:
容器名.setChildIndex(displayObject,int)就是调整这个容器下所有控件(或子容器)的顺序的函数,既然flex有先来在下的原则,那么用这个自然也能调整层之间的布局了。
举个例子吧:

如果要把最下层的调到最上层,用     容器名.setChildIndex(容器名.getChildAt(0),容器名.numChildren)
最上层的调到最下层    容器名.setChildIndex(容器名.getChildAt(容器名.numChildren-1),0)
这样就可以解决动态生成控件时老是被原来控件盖住的问题了!
回复回复国际流浪歌手[2009-03-21 11:38 AM | del]
你的实例下不了呵?请你帮我做一个,100块可以吧? 我qq:191961286, 手机:13316880391
回复来自 techmango 的评论 techmango 于 2009-03-21 12:01 AM 回复
嗨,同志,你这样会吓到人的.
我刚才已经更新了附件,你再试试吧.
回复回复adam[2009-03-19 09:55 AM | del]
this is a good sample.
回复来自 techmango 的评论 techmango 于 2009-03-21 12:06 AM 回复
Heheh, It seems this sample is very useful for many people.
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.