Flex中嵌入网页(IFrame)

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" resize="callLater(moveIFrame)" move="callLater(moveIFrame)" initialize="init();">
		<mx:Script>
		<![CDATA[
			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");  
	            }  
	        } 
		]]>
	</mx:Script>
</mx:Canvas>

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自动生成的，然后需要加上以下代码：

<script>
	function moveIFrame(x,y,w,h) {  
	   var frameRef=document.getElementById("myFrame");  
	   frameRef.style.left=x;  
	   frameRef.style.top=y;  
	  	} 
	function loadIFrame(url){  
         document.getElementById("myFrame").src=url;
	} 
	
	function IFrameShow(display){
	document.getElementById("myFrame").style.visibility=display?"visible":"hidden";		
	}
	
	function IFrameOnBulr()
    {
        //根据id获取flash实例，ListDemo，可以从Embed
        var flash = (navigator.appName.indexOf ("Microsoft") !=-1)?window["IFremaDemo"]:document["IFremaDemo"];
        //调用ActionScript注册的回调方法
        flash.IFrameOnBulr();
    }
</script>
<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>