×
文章路径: Flex

Flex嵌入页面及As函数与Js函数互相调用

发表于3年前(Dec 24, 2014 9:11:00 AM)  阅读 731  评论 0

分类: Flex

标签: as函数与js函数相互调用 FABridge flex-iframe flex嵌入页面

flex项目中,经常会遇到要嵌入html页面的情况,嵌入页面我们可以使用google的flex-iframe控件,嵌入页面后,大多情况,嵌入页面跟flex页面需要进行交互,传递数据,通常我们都是通过相互函数调用来完成的,as与js之间相互调用可以使用FABridge控件来完成。在这里我写了一个示例工程,用来演示flex如何嵌入一个html页面,并完成两个页面之间函数的相互调用。工程我将打包上传,里面包含了所用到的控件包。

1、下载flex-iframe控件,现在最新版本是flex-iframe-1.5.1.swc,将下载的包copy到工程的flex_libs目录。

2、下载FABridge控件,FABridge分为两部分,一个是FABridge.as,一个是FABridge.js,将as文件放入flex_src,将js文件放入html-template文件夹,并修改index.template.html,将 FABridge.js文件引入。

3、将要嵌入的html页面放入html-template文件夹,它将自动编译到项目根目录。

4、在flex页面Appllication引入flex-iframe命名空间xmlns:flexiframe=”http://code.google.com/p/flex-iframe/”  ,并在页面加入<fab:FABridge xmlns:fab=”bridge.*” />,这样页面就可以嵌入html页面,并实现as函数与js函数相互调用了。flex页面源码如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:flexiframe="http://code.google.com/p/flex-iframe/" >
	<!--引入flex-iframe命名空间 -->

	 <mx:Script>
    	<![CDATA[
    		import mx.events.CloseEvent;
    		import mx.controls.Alert;
    		public function test():void {
    			//将嵌入页面先隐藏,窗口关闭后再显示
    			iFrameBySource.visible = false;
    			Alert.show("test", null, null, null, closeHandler);
    		}

    		public function closeHandler(event:CloseEvent):void {
    			//对话框关闭后重新显示嵌入页面
    			iFrameBySource.visible = true;
    		}

    		public function testJS():void {
    			iFrameBySource.visible = false;
    			//调用html页面的test2 js函数,调用完执行回调方法
    			iFrameBySource.callIFrameFunction('test2',null,test2CallBack);
    		}

    		private function test2CallBack(result : Object):void
	        {
	        	//显示js函数的返回值
	            Alert.show(result.toString(), null, null, null, closeHandler);
	        }
    	]]>
    </mx:Script>

	<fab:FABridge xmlns:fab="bridge.*" />

    <mx:Panel width="80%" height="80%">

        <flexiframe:IFrame id="iFrameBySource"
                           width="100%"
                           height="100%"
                           source="about.html"/>
    </mx:Panel>
 	<mx:Button label="click" click="testJS()" />
</mx:Application>

flex页面嵌入其他页面有个很头痛的问题,就是遮盖问题,至今好像没有很好的解决方案,这个不是本文讨论的重点,示例代码中稍微进行了一下处理。

工程下载地址: /upload/2014/11/24/FlexIFrame.rar

发表评论