Flex与Javascript交互

tianhao 2009-11-25

展开全文

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?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="absolute">
<mx:Script>
    
</mx:Script>

<mx:Button label="Click me" click="myClick(event);"/>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute">
<mx:Script>

</mx:Script>

<mx:Button label="Click me" click="myClick(event);"/>
</mx:Application>

index.html

view plaincopy to clipboardprint?
/**
*　被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;
}
/**
*　被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

view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" initialize="initApp()">
<mx:Script>
    
</mx:Script>
<mx:TextInput id="nameTxt"/>
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" initialize="initApp()">
<mx:Script>

</mx:Script>
<mx:TextInput id="nameTxt"/>
</mx:Application>

index.html

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

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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"></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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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"></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)，各个参数具体功能如下：

swfUrl（String，必须的）指定SWF的URL。
id（String，必须的）指定将会被Flash内容替换的HTML元素（包含你的替换内容）的id。
width（String，必须的）指定SWF的宽。
height（String，必须的）指定SWF的高。
version（String，必须的）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）。
expressInstallSwfurl（String，可选的）指定express install SWF的URL并激活Adobe express install。
flashvars（String，可选的）用name:value对指定你的flashvars。
params（String，可选的）用name:value对指定你的嵌套object元素的params。
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>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/dante_k7/archive/2009/06/11/4260228.aspx