Flex中嵌入网页(IFrame)

转自：http://alvinqq.javaeye.com/blog/539618

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

Java代码

1. "1.0" encoding="utf-8"?>   
2. "http://www.adobe.com/2006/mxml" resize="callLater(moveIFrame)" move="callLater(moveIFrame)" initialize="init();">   
3.            
4.         
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(0, 0);     
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.        
74.   

import mx.controls.Alert;
import flash.external.ExternalInterface;  
import flash.geom.Point;  
import flash.net.navigateToURL;  
private var __source: String;

//Flash场景0,0坐标 var localPt:Point = new Point(0, 0); 
//转换为浏览器页面坐标 var globalPt:Point = this.localToGlobal(localPt);  
//这样就可以在Flex页面中嵌入任意的HTML页面了，为了方便，
public function moveIFrame():void
{
var localPoint:Point = new Point(0, 0);  
    var globalPoint:Point = this.localToGlobal(localPoint);  
    ExternalInterface.call("moveIFrame", globalPoint.x, globalPoint.y, this.width, this.height);  
}

//调用Javascript的loadIFrame方法，设置IFrame的src(URL)
public function set source(source: String): void {  
    if (source) 
    {  
        if (!ExternalInterface.available)  
        {  
           Alert.show("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; 
       //Alert.show(source); 
       ExternalInterface.call("loadIFrame",source);  
   }  
} 

//初始化时注册供Javascript调用的方法
public function init():void
{
ExternalInterface.addCallback("IFrameOnBulr",showIFrameAgain);
}

//Javascript调用IFrameOnBlur方法时的处理方法
public function showIFrameAgain():void
{
this.source=this.__source;
this.showIFrame=true;
this.moveIFrame();
}

//调用Javascript的IFrameShow方法，设置IFrame的可见状态
public function set showIFrame(display:Boolean):void
{
ExternalInterface.call("IFrameShow",display);
}

public function get source(): String {  
            return __source;  
       }  
       //重载了Canvas的visible属性，以便在Canvas隐藏HTML页面中的IFrame
override public function set visible(visible: Boolean): void 
{
            super.visible=visible;
            if (visible)  
            {  
                ExternalInterface.call("showIFrame");  
            }  
            else  
            {  
                ExternalInterface.call("hideIFrame");  
            }  
        } 
]]>

IFremaDemo.mxml文件如下：

Java代码

1. "1.0" encoding="utf-8"?>   
2. "http://www.adobe.com/2006/mxml" layout="absolute" xmlns:zq="*">   
3. "Iframe.showIFrame=true;Iframe.moveIFrame();Iframe.source=Iframe.source" id="Iframe" source="http://weather.news.qq.com/inc/ss258.htm" x="240" y="23"  string">"190" string">"190"/>   
4.   

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

Java代码

1.   
2.