Flex与Javascript交互

关键字：ExternalInterface

所用类库：SWFObject

 

/**

 * Flex调用Javascript函数

 * @params  functionName:String   Javascript函数名称

 * @params ...params    Javascript函数参数

 * @return  返回Javascript函数的return内容

 **/

ExternalInterface.call(functionName:String, ...params);

 

main.mxml

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
  3.       layout="absolute">  
  4. <mx:Script>  
  5.     <!--[CDATA[  
  6.             import flash.external.ExternalInterface;  
  7.             import mx.utils.ObjectUtil;  
  8.             /** 
  9.              *  调用Java    script    函数 
  10.              *  @params evt:MouseEvent 
  11.              *  @return void 
  12.              **/  
  13.             private function myClick(evt:MouseEvent):void {  
  14.                 var item:Object = new Object();  
  15.                 item.name = "Dante";  
  16.                 item.address = "Beijing";  
  17.                          
  18.                 var results:Object = ExternalInterface.call("myfunc",item);  
  19.                 //results为myfunc函数返回的对象   
  20.                 trace(ObjectUtil.toString(results));  
  21.             }  
  22.     ]]-->  
  23. </mx:Script>  
  24.    
  25. <mx:Button label="Click me" click="myClick(event);"/>  
  26. </mx:Application>  

index.html

view plaincopy to clipboardprint?
  1. /** 
  2.  *　被Flex调用的 myfunc函数 
  3.  *    @params item  对象 
  4.  *    @return results　返回一个对象给Flex 
  5.  **/  
  6. function myfunc(item) {  
  7.     alert(item.name+"--"+item.address);  
  8.      
  9.    //创建对象   
  10.     var results = {};  
  11.     results .name= "dante";  
  12.     results .age = 23;  
  13.     results .sex = "man";  
  14.     return obj;  
  15. }  

/**

 * Javascript调用Flex函数

 * @params   functionName:String    Javascript调用Flex函数名

 * @params   closure:Function     Flex将要调用的函数

 * @return void

 **/

ExternalInterface.addCallback(functionName:String,closure:Function);

 

main.mxml

view plaincopy to clipboardprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     
  3.     layout="absolute" initialize="initApp()">  
  4. <mx:Script>  
  5.     <!--[CDATA[  
  6.             import flash.external.ExternalInterface;  
  7.             import mx.utils.ObjectUtil;  
  8.             /** 
  9.              *  initApp 
  10.              *  @return void 
  11.              **/  
  12.             private function initApp():void {  
  13.                  //注册列表   
  14.                  ExternalInterface.addCallback("saveD",saveData);  
  15.                  
  16.                  //HTML　与　FLEX交互   
  17.                  //params.flashvars = "xmlPath=hello&name=dante";   
  18.                  var item:Object = Application.application.parameters;  
  19.                  trace("xmlPath:"+item.xmlPath ,"name:" + item.name);  
  20.             }  
  21.             /** 
  22.              *  saveData 
  23.              *  @params item:Object  java    script    传过来的参数 
  24.              *  @return void 
  25.              **/  
  26.             private function saveData(item:Object):void {  
  27.                  trace("javascript调用Flex函数成功!");  
  28.                  nameTxt.text = item.name;     
  29.             }  
  30.     ]]-->  
  31. </mx:Script>  
  32.   <mx:TextInput id="nameTxt"/>  
  33. </mx:Application>  

index.html

HTML内嵌swf文件，我用的SWFObject，个人认为是一个很好的类库，简化了包含代码。
注意 ：javascript调用Flex的函数，必须要获得swf的ID，可以通过document.getElementById(),也可以使用swfobject.getObjectById()。

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5. <mce:script src="js/swfobject.js" mce_src="js/swfobject.js" type="text/javascript"></mce:script>     
  6. <title>SWFObject</title>  
  7. <mce:script type="text/javascript" language="javascript"><!--  
  8.     var flashvars = {};  
  9.     flashvars.xmlPath = "hello";  
  10.     flashvars.name    = "dante";  
  11.       
  12.     var params = false;  
  13.       
  14.     var attributes = {};  
  15.     //ID,也就是swf的ID，这个ID很重要，通过它调用flex的方法   
  16.     attributes.id = "swf01";    
  17.     　  
  18.     //内嵌swf文件，这个embedSWF方法，我在最后的补充会说下   
  19.     swfobject.embedSWF("swf/main.swf","myPanel","300","200","9.0.0","swf/expressInstall.swf",flashvars,params,attributes);  
  20.     /** 
  21.     *　调用Flex函数 
  22.     *    @return void 
  23.     **/  
  24.     function callFlex(item) {  
  25.         //通过ID获得swf，也可以使用document.getElementById();   
  26.         //var swf = document.getElementById("swf01");   
  27.         var swf = swfobject.getObjectById("swf01");  
  28.         var item = {};  
  29.         item.name = document.getElementById("nameTxt").value;  
  30.         //调用Flex函数，传参item:Object   
  31.         swf.saveD(item);  
  32.     }  
  33. // --></mce:script>   
  34. </head>  
  35. <body>  
  36. <center>  
  37.     <div id="myPanel">Flex content</div>  
  38.     <table>  
  39.         <tr>  
  40.             <td>Name</td>  
  41.             <td><input type="text" id="nameTxt"/></td>  
  42.         </tr>  
  43.         <tr>  
  44.             <td colspan="2">  
  45.                 <a href="javascript:callFlex();" mce_href="javascript:callFlex();">Call Flex</a>  
  46.             </td>  
  47.         </tr>  
  48.     </table>  
  49. </center>  
  50. </body>  
  51. </html>  

 

OK,两种交互的方式已经告诉大家了，快试试吧。

 

SWFObject使用补充：

       swfobject.embedSWF()

       swfobject.getObjectById("swfID")

       swfobject.removeSWF("swfID")

 

一.swfobject.embedSWF：

内嵌swf文件，这个函数的参数比较多swfobject.embedSWF(swfUrl, id, width, height, version,expressInstallSwfurl, flashvars,params, attributes)，各个参数具体功能如下：

  1. swfUrl（String，必须的）指定SWF的URL。
  2. id（String，必须的）指定将会被Flash内容替换的HTML元素（包含你的替换内容）的id。
  3. width（String，必须的）指定SWF的宽。
  4. height（String，必须的）指定SWF的高。
  5. version（String，必须的）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）。
  6. expressInstallSwfurl（String，可选的）指定express install SWF的URL并激活Adobe express install。
  7. flashvars（String，可选的）用name:value对指定你的flashvars。
  8. params（String，可选的）用name:value对指定你的嵌套object元素的params。
  9. attributes（String，可选的）用name:value对指定object的属性。

注意 ：在不破坏参数顺序的情况下，你可以忽略可选参数。如果你不想使用一个可选参数，但是会使用后面的一个可选参数，你可以简单的传入false作为参数的值。对flashvars、params和 attributes这些JavaScript对象来说，你也可以相应的传入一个空对象{}。

二.swfobject.getObjectById("swfId")

通过swfid获得swf对象，通过该对象可调用flex函数。

三.swfobject.removeSWF("swfId")

通过swfId删除swf。

注意 ：删除swf这里需要提醒下，因为embedSWF是替换标签，而不是填充。比如上面的例子<div id="myPanel">Flex content</div>，如果执行了swfobject.removeSWF后，想重新添加SWF必须要重新创建<div id="myPanel">或者更改embedSWF的第二个参数更改替换新的标签ID。因为在这里SWF替换了调了<div>

posted on 2011-07-20 18:05  破阵子 . 如是我闻  阅读(497)  评论(0)  编辑  收藏  举报

导航