探秘Flex与JavaScript交互

在学习Flex的过程中你可能会遇到Flex与JavaScript交互的问题，这里和大家分享一下，主要包括Flex调用JavaScript中的函数和JavaScript调用Flex中的函数两大部分内容。

创新互联专注于企业成都全网营销推广、网站重做改版、大宁网站定制设计、自适应品牌网站建设、H5网站设计、商城网站定制开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为大宁等各大城市提供网站开发制作服务。

Flex与JavaScript交互

Flex 与JavaScript 交互，主要依靠Flex的ExternalInterface，其提供了addCallBack和call方法。

◆先来看Flex调用JavaScript中的函数

FlexConnectJavaScript.mxml

 
 
 
  
  
  
<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  
  
  
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
  
  
  
layout="absolute"> 
  
  
  
<mx:Script> 
  
  
  
<![CDATA[  
  
  
  
importflash.external.*;  
  
  
  
publicfunctioninvokeJavaScript():void  
  
  
  
{  
  
  
  
lblResult.text=ExternalInterface.call("returnTheName","huangxi";  
  
  
  
}  
  
  
  
]]> 
  
  
  
</mx:Script> 
  
  
  
<mx:Buttonidmx:Buttonid="btnConnect"label="调用JavaScript"click="invokeJavaScript()"x="229"y="204"/> 
  
  
  
<mx:Labelidmx:Labelid="lblResult"text="test"x="205"y="99"width="150"height="80"/> 
  
  
  
</mx:Application> 
  
  
  
 
  
  
  
FlexConnectJavaScript.html中<Script>加入  
  
  
  
functionreturnTheName(a)  
  
  
  
{  
  
  
  
return"HUANGXI";  
  
  
  
}  
  
  
  
////////////////////////  
  
  
  
 
 
 

 
小结

1.ExternalInterface.call("returnTheName","huangxi");其中***个参数与JavaScript中的函数相同,第二个参数为传递参数。

◆再来看JavaScript调用Flex中的函数

JavaScriptConnectFlex.mxml

 
 
 
  
  
  
<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  
  
  
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
  
  
  
layout="absolute"creationComplete="initApp()"> 
  
  
  
<mx:Script> 
  
  
  
<![CDATA[  
  
  
  
importflash.external.ExternalInterface;  
  
  
  
publicfunctionadd():int  
  
  
  
{  
  
  
  
vari:int;  
  
  
  
varsum:int=0;  
  
  
  
for(i=1;i<=100;i++)  
  
  
  
{  
  
  
  
sum+=i;  
  
  
  
}  
  
  
  
returnsum;  
  
  
  
}  
  
  
  
publicfunctioninitApp():void  
  
  
  
{  
  
  
  
ExternalInterface.addCallback("addTo100",add);  
  
  
  
}  
  
  
  
]]> 
  
  
  
</mx:Script> 
  
  
  
</mx:Application> 
  
  
  
JavaScriptConnectFlex.html中加入  
  
  
  
<buttononclickbuttononclick="addMethod()">计算</button> 
  
  
  
...  
  
  
  
中加入  
  
  
  
functionaddMethod()  
  
  
  
{  
  
  
  
vars=JavaScriptConnectFlex.addTo100();  
  
  
  
alert(s);  
  
  
  
}  
  
  
  
///////////////  
 
 

 小结

1.ExternalInterface.addCallback("addTo100",add);定义JavaScript可以调用的方法

2.可见JavaScript要调用Flex函数,Flex要声明一下;而Flex调用JavaScript函数则不需要

【编辑推荐】

1. 学习笔记 Flex如何结合JSP
2. FlexBuilder4十大新特性闪亮登场
3. 学习总结 在Flex中如何嵌入Flex字体
4. Flex框架Riawave的定制应用
5. 技术前沿 Flex2.0 从零开始实现文件上传