Flex Javascript交互实现代码-丞旭猿

关键字：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>

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″/> 
<script src=”https://www.home1024.com/article/js/swfobject.js” src=”https://www.home1024.com/article/js/swfobject.js” type=”text/javascript”></script> 
<title>SWFObject</title> 
<script type=”text/javascript” language=”javascript”><!– 
var flashvars = false; 
var params = {}; 
params.flashvars = “xmlPath=hello&name=dante”; 
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); 
} 
// –></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=”https://www.home1024.com/article/callFlex();” href=”https://www.home1024.com/article/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>

以上就是【Flex Javascript交互实现代码】的全部内容了,欢迎留言评论进行交流!