`
alvinqq
  • 浏览: 185346 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Flex中嵌入网页(IFrame)

    博客分类:
  • Flex
阅读更多
这段时间一直在苦心研究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>

  • 大小: 12.9 KB
分享到:
评论

相关推荐

    flex 嵌入完美Iframe

    在Flex中嵌入Iframe是为了能够展示HTML内容,这可能是为了利用现有的网页服务、集成第三方Web应用或者引入动态内容。由于Flex和HTML是两种不同的技术栈,它们之间的整合需要一些技巧和策略。 首先,我们需要了解...

    Flex中利用IFrame解决嵌入HTML时Flex组件被遮挡和IFrame被隐藏的问题

    1. **Flex组件被遮挡**:由于Flex和HTML的渲染机制不同,当HTML内容被加载到IFrame中时,可能会覆盖Flex组件,导致菜单、弹出界面或右键菜单等不可见。解决这个问题的关键在于调整Z-index,即设置IFrame和Flex组件的...

    flex中嵌入网页完美解决方案

    利用google-iframe在flex中嵌入网页是在swf上覆盖一个div,flex与网页无法融合,这样会出现各种显示,控制问题,如页面自适应,页面显示控制,内容遮盖,网页内容不随flex滚动条滚动等,现在这些问题都解决了

    Iframe(Flex嵌入完整网页的类)

    在Flex中嵌入完整的网页所用到的类, xmlns:flexiframe="com.google.code.flexiframe.*" &lt;flexiframe:IFrame id="helpFrame" source="assets/dreamweaver/help/helpHome....

    flex中的iframe源码

    7. **交互性**:虽然iframe在Flex中主要用作静态内容的容器,但也可以尝试通过JavaScript通信(如`ExternalInterface` API)实现Flex与嵌入iframe之间的交互。 在提供的"iframe"文件中,很可能包含了实现上述功能的...

    flex中嵌入html

    在Flex应用中嵌入HTML是一种常见的需求,这可以让我们在富客户端环境中利用HTML的灵活性和丰富性。Flex是由Adobe开发的一种开源框架,主要用于构建RIA(Rich Internet Applications)即富因特网应用程序。它允许...

    flex中使用iframe

    在Flex开发中,有时我们需要集成外部网页或者HTML内容到我们的应用程序中,这时候`iframe`就成为一个重要的工具。Flex是Adobe推出的一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。本文将...

    Flex项目Google IFrame使用

    在Flex项目开发中,有时我们需要将外部网页内容嵌入到我们的应用中,这时Google IFrame就成为了一个常用的选择。IFrame(Inline Frame)是HTML的一种元素,它允许我们在一个网页中嵌入另一个网页,这对于展示第三方...

    flex-iframe-1.4.6

    然而,有时需要在Flex应用内部展示来自其他源的内容,比如嵌入网页或视频,这时iframe就显得非常有用。flex-iframe-1.4.6就是为此目的而设计的,它提供了在Flex环境中集成iframe的解决方案。 这个压缩包文件"flex-...

    flex IFrame控件的配置使用详细过程

    为了解决这一需求,本篇文章将详细介绍如何利用Google开发的IFrame组件来实现在Flex应用中嵌入并交互JS页面。 #### 二、IFrame组件介绍及安装 ##### 2.1 组件概述 IFrame组件是一种专门用于在Flex应用中嵌入HTML...

    Flex页面嵌入jsp文件

    flex-iframe1.5.1.zip解压找到flex-iframe-1.5.1\flex-iframe-1.5.1\bin\flex-iframe-1.5.1.swc放入flex项目的libs里面如果不是web项目就放倒lib里面,然后在你的mxml的头部里输入xmlns:名字(你自己喜欢怎么写)=...

    flex嵌入html的容器

    在HTML页面中嵌入Flex组件,可以利用Flex的强大功能来丰富网页的用户体验。本文将详细介绍如何在HTML中嵌入Flex容器,并以IFrameDemo为例进行说明。 首先,我们需要理解Flex和HTML的集成方式。通常,我们可以使用`...

    Flex IFrame

    6. **安全性与限制**:由于安全沙箱的存在,不是所有的网页都能在IFrame中正常运行,特别是涉及到跨域访问时。开发者需要了解Flash Player的安全策略,并确保内容符合安全规定。 7. **性能优化**:在Flex应用中嵌入...

    flex-iframe

    Flex-iframe是一个强大的技术,它允许开发者在Adobe Flex应用程序中嵌入HTML页面,如同使用内联框架(iframe)一样。这种技术极大地扩展了Flex的功能,使得开发者能够将丰富的Web内容和交互性引入Flex应用,而无需...

    iframe for flex!

    在IT行业中,尤其是在Web开发领域,`iframe`和`flex`是两个非常重要的概念,它们在构建现代网页和应用程序时发挥着关键作用。让我们详细探讨这两个技术及其在实际应用中的结合。 `iframe`,全称为“inline frame”...

    flex-iframe-1.4.1.zip

    通过这种方式,我们可以轻松地将任何网页嵌入到我们的页面中,并利用Flex-Iframe提供的丰富功能进行增强。 总的来说,Flex-Iframe 1.4.1是一个强大且易用的iframe解决方案,它在保持向下兼容性的同时,提供了丰富的...

    flex把html页面作为类似iframe的样子的组件完全的嵌入到mxml中去。

    Flex中的IFrame组件允许我们像HTML中的iframe元素一样,在MXML应用中嵌入一个完整的网页。IFrame组件位于mx.controls包下,通过它,我们可以加载任何有效的URL,包括本地或远程的HTML页面。 2. 使用IFrame组件的...

Global site tag (gtag.js) - Google Analytics