Flex嵌入HTML页面

这段时间一直在苦心研究Flex,今天突然想,我们平时都是把swf放到网页中,怎么才能把网页嵌入到Flex中呢?我查了一些资料,然后经过自己的不懈努力,终于搞定。
为了方便,写了个嵌入HTML页面的代理IFrame组件,该组件封装了所有需要的Flex端代码,后面只要通过标签调用就OK了。
IFrame.mxml文件如下:

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" resize="callLater(moveIFrame)" move="callLater(moveIFrame)" initialize="init();">   
  3.         <mx:Script>   
  4.         <![CDATA[   
  5.             import mx.controls.Alert;   
  6.             import flash.external.ExternalInterface;     
  7.             import flash.geom.Point;     
  8.             import flash.net.navigateToURL;     
  9.             private var __source: String;   
  10.                
  11.             //Flash场景0,0坐标 var localPt:Point = new Point(0, 0);    
  12.             //转换为浏览器页面坐标 var globalPt:Point = this.localToGlobal(localPt);     
  13.             //这样就可以在Flex页面中嵌入任意的HTML页面了,为了方便,   
  14.                         public function moveIFrame():void  
  15.             {   
  16.                 var localPoint:Point = new Point(00);     
  17.                 var globalPoint:Point = this.localToGlobal(localPoint);     
  18.                 ExternalInterface.call("moveIFrame", globalPoint.x, globalPoint.y, this.width, this.height);     
  19.             }   
  20.                
  21.             //调用javaScript的loadIFrame方法,设置IFrame的src(URL)   
  22.             public function set source(source: String): void {     
  23.                 if (source)    
  24.                 {     
  25.                     if (!ExternalInterface.available)     
  26.                     {     
  27.                        Alert.show("The ExternalInterface is not available in this container. Internet Explorer ActiveX, " +    
  28.                             "Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");     
  29.                     }     
  30.                     __source = source;    
  31.                     //Alert.show(source);    
  32.                     ExternalInterface.call("loadIFrame",source);     
  33.                 }     
  34.             }    
  35.                
  36.             //初始化时注册供javaScript调用的方法   
  37.             public function init():void  
  38.             {   
  39.                 ExternalInterface.addCallback("IFrameOnBulr",showIFrameAgain);   
  40.             }   
  41.                
  42.             //javaScript调用IFrameOnBlur方法时的处理方法   
  43.             public function showIFrameAgain():void  
  44.             {   
  45.                 this.source=this.__source;   
  46.                 this.showIFrame=true;   
  47.                 this.moveIFrame();   
  48.             }   
  49.                
  50.             //调用javaScript的IFrameShow方法,设置IFrame的可见状态   
  51.             public function set showIFrame(display:Boolean):void  
  52.             {   
  53.                 ExternalInterface.call("IFrameShow",display);   
  54.             }   
  55.                
  56.             public function get source(): String {     
  57.                 return __source;     
  58.             }     
  59.             //重载了Canvas的visible属性,以便在Canvas隐藏HTML页面中的IFrame   
  60.             override public function set visible(visible: Boolean): void    
  61.             {   
  62.                 super.visible=visible;   
  63.                 if (visible)     
  64.                 {     
  65.                     ExternalInterface.call("showIFrame");     
  66.                 }     
  67.                 else     
  68.                 {     
  69.                     ExternalInterface.call("hideIFrame");     
  70.                 }     
  71.             }    
  72.         ]]>   
  73.     </mx:Script>   
  74. </mx:Canvas>  
  75. IFremaDemo.mxml文件如下
    • <?xml version="1.0" encoding="utf-8"?>   
    • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:zq="*">   
    • <zq:IFrame mouseUp="Iframe.showIFrame=true;Iframe.moveIFrame();Iframe.source=Iframe.source" id="Iframe" source="http://weather.news.qq.com/inc/ss258.htm" x="240" y="23"  width="190" height="190"/>   
    • </mx:Application>

    当然少不了js代码,IFremaDemo.html网页是Flex Builder3自动生成的,然后需要加上以下代码:

  1. <script>   
  2.     function moveIFrame(x,y,w,h) {     
  3.        var frameRef=document.getElementById("myFrame");     
  4.        frameRef.style.left=x;     
  5.        frameRef.style.top=y;     
  6.         }    
  7.     function loadIFrame(url){     
  8.          document.getElementById("myFrame").src=url;   
  9.     }    
  10.        
  11.     function IFrameShow(display){   
  12.     document.getElementById("myFrame").style.visibility=display?"visible":"hidden";        
  13.     }   
  14.        
  15.     function IFrameOnBulr()   
  16.     {   
  17.         //根据id获取flash实例,ListDemo,可以从Embed   
  18.         var flash = (navigator.appName.indexOf ("Microsoft") !=-1)?window["IFremaDemo"]:document["IFremaDemo"];   
  19.         //调用ActionScript注册的回调方法   
  20.         flash.IFrameOnBulr();   
  21.     }   
  22. </script>   
  23. <iframe id="myFrame" name="myFrame" onblur="this.style.visibility='visible';IFrameOnBulr();" width="189" height="190" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" style="position:absolute;"></iframe>  
posted @ 2012-02-07 10:47  SFLDY  阅读(1312)  评论(0编辑  收藏  举报