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

Flex與JavaScript的交互

一、在JavaScript中調(diào)用Flex方法

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

addCallback()函數(shù)的定義如下：
 

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

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

舉個例子： 

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

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

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

 二、Flex調(diào)用JavaScript

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

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

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

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

參數(shù)function_name是要調(diào)用的JavaScript的函數(shù)名，后面的參數(shù)是JavaScript需要的參數(shù)。

舉個例子說明如何Flex調(diào)用JavaScript函數(shù)

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頁面中有如下函數(shù)定義：
 

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

【編輯推薦】

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