flex与JS互相调用

网上这方面资料比较多，flex调用JS的比较简单，可以查看http://www.cnblogs.com/tiandi/archive/2012/06/03/2532977.html，其具体内容如下：

1.flex调用js方法

调用方法例如：ExternalInterface.call("UploadComplete",oldName,uidName,_dir+"/"+uidName+type);

第一个是js方法名，后面几个是给这个js方法传的参数。这个方法必须在网页的js中注册，否则会调用失败。

需要注意的是调用之前需要检查网页的js是否已完成加载，用ExternalInterface.available可是判断。

注：这种调用方法是可以有返回值的，例如：var m:String = ExternalInterface.call(f,"New Title");

      但是这个返回值不能有时延（例如js需要进行ajax操作），否则m=null。因为flex是异步的。

<mx:Script>
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        import flash.external.*;
    
        public function callWrapper():void {
            var f:String = "changeDocumentTitle";
            var m:String = ExternalInterface.call(f,"New Title");
            trace(m);
        }
    </mx:Script>
    <mx:Button label="Change Document Title" click="callWrapper()"/>
</mx:Application>
Html页面中有如下函数定义：
<SCRIPT LANGUAGE="JavaScript">
    function changeDocumentTitle(a) {
        window.document.title=a;
        return "successful";
    }
</SCRIPT>

这个直接可以测试成功。

2、js调用flex：

js要调用flex方法，首先在flex中必须注册，将as方法注册为js可调用的方法。例如：ExternalInterface.addCallback("ConfirmGroup",ConfirmGroup);

第一个是js中调用时用的名称，第二个是as中定义的方法。

在ie浏览器中调用方法为： document.getElementById("mapContent").ConfirmGroup(1); 

mapContent为flash的id。

 注：它也是可以有返回值的。

示例：

AS:

<mx:Script>
    import flash.external.*;
    public function myFunc():Number {
        return 42;
    }
    public function initApp():void {
        ExternalInterface.addCallback("myFlexFunction",myFunc);
    }
</mx:Script> 

JS:

<SCRIPT language='JavaScript' charset='utf-8'>
    function callApp() {
        var x = MyFlexApp.myFlexFunction();
        alert(x);
    }
</SCRIPT>
<button οnclick="callApp()">Call App</button>

经常会出现undefined或者是null的异常，无法调试成功。在网上找了各种资料后，有人也遇到过这个问题，比较靠谱的原因是http://bbs.youkuaiyun.com/topics/320197922里说的接口不通的问题，解决方案：使用swfObject.js的类库。关键代码如下：      

JavaScript code

?

1 2 3

var  so =  new  SWFObject( "test.swf" ,  "flexObject" ,  "100%" ,  "100%" ,  "7" ,  "#336699" );   so.write( "divChart" );

这段代码中divChart是一个层。

flex关键源码：

public function asFunc():String {
				Alert.show("asFunc","asFunc",4);
				return "hello";
			}
			
			public function initApp():void {
				//AddCallback方法允许javascript调用flash时间上函数 
				ExternalInterface.addCallback("flexFunctionAlias", asFunc);
			}
			

js关键源码：

<script type="text/javascript" src="js/swfobject.js"></script>

function initFlex() {
		// 然后下面的代码就可以执行Flex里面的脚本了
		 swfobject.embedSWF("<%=request.getContextPath()%>/module/guard/video1.swf", "divChart", "100%", "100%", "7", "#336699");
	    }

	    function callApp()
	    {
	    	var ax = getSWFObject('divChart').flexFunctionAlias();
	    	alert(ax);
	    }

	// 得到flash对象，通过对IE,FireFox,谷歌的测试，不过我试的这几个浏览器都能找到document[movieName]，不过还是留着剩下的判断，说不定在某些浏览器可以派上用场
	 function getSWFObject(movieName)
	 {
	     if(document[movieName])
	     {
	         return document[movieName];
	     }else if(window[movieName]){
	         return window[movieName]; 
	     }else if(document.embeds && document.embeds[movieName]){
	         return document.embeds[movieName];
	     }else{
	         return document.getElementById(movieName);
	     }
	 }

html中添加div：

 <div id="divChart" ></div>