Flex与Javascript交互

/**

 * Flex调用Javascript函数

 * @params  functionName:String   Javascript函数名称

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

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

 **/

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

 

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute">
<mx:Script>
<!--[CDATA[
   import flash.external.ExternalInterface;
            import mx.utils.ObjectUtil;
            /**
             *  调用Java    script    函数
             *  @params evt:MouseEvent
             *  @return void
             **/
            private function myClick(evt:MouseEvent):void {
                var item:Object = new Object();
                item.name = "Dante";
                item.address = "Beijing";
                       
                var results:Object = ExternalInterface.call("myfunc",item);
                //results为myfunc函数返回的对象
                trace(ObjectUtil.toString(results));
            }
]]-->
</mx:Script>
 
<mx:Button label="Click me" click="myClick(event);"/>
</mx:Application>

index.html/**
 * 被Flex调用的 myfunc函数
 *    @params item  对象
 *    @return results 返回一个对象给Flex
 **/
function myfunc(item) {
    alert(item.name+"--"+item.address);
   
   //创建对象
    var results = {};
    results .name= "dante";
    results .age = 23;
    results .sex = "man";
    return obj;
}

**

 * Javascript调用Flex函数

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

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

 * @return void

 **/

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

 

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
layout="absolute" initialize="initApp()">
<mx:Script>
<!--[CDATA[
   import flash.external.ExternalInterface;
            import mx.utils.ObjectUtil;
            /**
             *  initApp
             *  @return void
             **/
            private function initApp():void {
                 //注册列表
                 ExternalInterface.addCallback("saveD",saveData);
               
                 //HTML 与 FLEX交互
                 //params.flashvars = "xmlPath=hello&name=dante";
                 var item:Object = Application.application.parameters;
                 trace("xmlPath:"+item.xmlPath ,"name:" + item.name);
            }
            /**
             *  saveData
             *  @params item:Object  java    script    传过来的参数
             *  @return void
             **/
            private function saveData(item:Object):void {
                 trace("javascript调用Flex函数成功!");
                 nameTxt.text = item.name;   
            }
]]-->
</mx:Script>
  <mx:TextInput id="nameTxt"/>
</mx:Application>

index.html

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<mce:script src="js/swfobject.js" mce_src="js/swfobject.js" type="text/javascript"></mce:script>   
<title>SWFObject</title>
<mce:script type="text/javascript" language="javascript"><!--
    var flashvars = {};
    flashvars.xmlPath = "hello";
    flashvars.name    = "dante";
    
    var params = false;
    
    var attributes = {};
    //ID,也就是swf的ID,这个ID很重要,通过它调用flex的方法
    attributes.id = "swf01";  
     
    //内嵌swf文件,这个embedSWF方法,我在最后的补充会说下
    swfobject.embedSWF("swf/main.swf","myPanel","300","200","9.0.0","swf/expressInstall.swf",flashvars,params,attributes);
    /**
    * 调用Flex函数
    *    @return void
    **/
    function callFlex(item) {
        //通过ID获得swf,也可以使用document.getElementById();
        //var swf = document.getElementById("swf01");
        var swf = swfobject.getObjectById("swf01");
        var item = {};
        item.name = document.getElementById("nameTxt").value;
        //调用Flex函数,传参item:Object
        swf.saveD(item);
    }
// --></mce:script>
</head>
<body>
<center>
    <div id="myPanel">Flex content</div>
    <table>
        <tr>
            <td>Name</td>
            <td><input type="text" id="nameTxt"/></td>
        </tr>
        <tr>
            <td colspan="2">
                <a href="javascript:callFlex();" mce_href="javascript:callFlex();">Call Flex</a>
            </td>
        </tr>
    </table>
</center>
</body>
</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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值