本文和大家重點討論一下Flex與JavaScript的交互：Flex調用JavaScript或者被JavaScript調用，在Flex中調用JavaScript最簡單的方法是使用ExternalInterface()，可以使用此API調用任意JavaScript，傳遞參數，獲得返回值，如果調用失敗，Flex拋出一個異常。

Flex與JavaScript的交互

一、在JavaScript中調用Flex方法

在Flex中可以用ExternalInterface來調用Flex的方法，途徑是通過在Flex應用可調用方法列表中添加指定的公用方法。在Flex應用中通過調用addCallback()可以把一個方法添加到此列表中。addCallback將一個ActionScript的方法注冊為一個JavaScript和VBScript可以調用的方法。

addCallback()函數的定義如下：
 

addCallback(function_name:String,closure:Function):void 

function_name參數就是在Html頁面中腳本調用的方法名。closure參數是要調用的本地方法，這個參數可以是一個方法也可以是對象實例。

舉個例子： 

<mx:Script> 
importflash.external.*;  
publicfunctionmyFunc():Number{  
return42;  
}  
publicfunctioninitApp():void{  
ExternalInterface.addCallback("myFlexFunction",myFunc);  
}  
</mx:Script> 

 那么在Html頁面中，先獲得SWF對象的引用，也就是用<object.../>聲明的Swf的Id屬性，比如說是MyFlexApp。然后就可以用以下方式調用Flex中的方法。
 

<SCRIPTlanguageSCRIPTlanguage='JavaScript'charset='utf-8'> 
functioncallApp(){  
varx=MyFlexApp.myFlexFunction();  
alert(x);  
}  
</SCRIPT> 
<buttononclickbuttononclick="callApp()">CallApp</button> 

 二、Flex調用JavaScript

你可以調用Html頁面中的JavaScript，通過與JavaScript的交互，可以改變Style，調用遠程方法。還可以將數據傳遞給Html頁面，處理后再返回給Flex，完成這樣的功能主要有兩種方法：ExternalInterface()和navigateToUrl()。

在Flex中調用JavaScript最簡單的方法是使用ExternalInterface()，可以使用此API調用任意JavaScript，傳遞參數，獲得返回值，如果調用失敗，Flex拋出一個異常。
ExternalInterface封裝了對瀏覽器支持的檢查，可以用available屬性來查看。

ExternalInterface的使用非常簡單，語法如下：
 

flash.external.ExternalInterface.call(function_name:String[,arg1,...]):Object; 

參數function_name是要調用的JavaScript的函數名，后面的參數是JavaScript需要的參數。

舉個例子說明如何Flex調用JavaScript函數

Flex應用中，添加如下方法：
 

<mx:Script> 
<?xmlversionxmlversion="1.0"encoding="iso-8859-1"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
<mx:Script> 
importflash.external.*;  
 
publicfunctioncallWrapper():void{  
varf:String="changeDocumentTitle";  
varm:String=ExternalInterface.call(f,"NewTitle");  
trace(m);  
}  
</mx:Script> 
<mx:Buttonlabelmx:Buttonlabel="ChangeDocumentTitle"click="callWrapper()"/> 
</mx:Application> 
 

 Html頁面中有如下函數定義：
 

<SCRIPTLANGUAGESCRIPTLANGUAGE="JavaScript"> 
functionchangeDocumentTitle(a){  
window.document.title=a;  
return"successful";  
}  
</SCRIPT> 

【編輯推薦】

1. Flex樣式的添加和卸載
2. Flex安全沙箱問題解決方法
3. 技術前沿 看Flex客戶端緩存技術如何使用
4. 解析Flex全屏模式設置方法
5. Flex內存泄露解決方法和內存釋放優化原則