关键字:ExternalInterface
所用类库:SWFObject
/**
* 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>
<?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;
- }
/** * 被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>
<?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>
<!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),各个参数具体功能如下:
- 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>