快捷導(dǎo)航

Flex Javascript交互實(shí)現(xiàn)代碼

更新時(shí)間：2009年06月11日 22:37:44 作者：

刪除swf這里需要提醒下，因?yàn)閑mbedSWF是替換標(biāo)簽，而不是填充。

關(guān)鍵字：ExternalInterface
所用類庫(kù)：SWFObject
/**
* Flex調(diào)用Javascript函數(shù)
* @params functionName:String Javascript函數(shù)名稱
* @params ...params Javascript函數(shù)參數(shù)
* @return 返回Javascript函數(shù)的return內(nèi)容
**/
ExternalInterface.call(functionName:String, ...params);
main.mxml

復(fù)制代碼代碼如下:

<?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; 
/** 
* 調(diào)用Java script 函數(shù) 
* @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函數(shù)返回的對(duì)象 
trace(ObjectUtil.toString(results)); 
} 
]]--> 
</mx:Script> 

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

index.html

復(fù)制代碼代碼如下:

/** 
*　被Flex調(diào)用的 myfunc函數(shù) 
* @params item 對(duì)象 
* @return results　返回一個(gè)對(duì)象給Flex 
**/ 
function myfunc(item) { 
alert(item.name+"--"+item.address); 

//創(chuàng)建對(duì)象 
var results = {}; 
results .name= "dante"; 
results .age = 23; 
results .sex = "man"; 
return obj; 
} 

/**
* Javascript調(diào)用Flex函數(shù)
* @params functionName:String Javascript調(diào)用Flex函數(shù)名
* @params closure:Function Flex將要調(diào)用的函數(shù)
* @return void
**/
ExternalInterface.addCallback(functionName:String,closure:Function);
main.mxml

復(fù)制代碼代碼如下:

<?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 { 
//注冊(cè)列表 
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 傳過來的參數(shù) 
* @return void 
**/ 
private function saveData(item:Object):void { 
trace("javascript調(diào)用Flex函數(shù)成功!"); 
nameTxt.text = item.name; 
} 
    ]]--> 
</mx:Script> 
<mx:TextInput id="nameTxt"/> 
</mx:Application>

index.html

HTML內(nèi)嵌swf文件，我用的SWFObject，個(gè)人認(rèn)為是一個(gè)很好的類庫(kù)，簡(jiǎn)化了包含代碼。
注意：javascript調(diào)用Flex的函數(shù)，必須要獲得swf的ID，可以通過document.getElementById(),也可以使用swfobject.getObjectById()。

復(fù)制代碼代碼如下:

<!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="js/swfobject.js" src="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，這個(gè)ID很重要，通過它調(diào)用flex的方法 
attributes.id = "swf01"; 
　 
//內(nèi)嵌swf文件，這個(gè)embedSWF方法，我在最后的補(bǔ)充會(huì)說下 
swfobject.embedSWF("swf/main.swf","myPanel","300","200","9.0.0","swf/expressInstall.swf",flashvars,params,attributes); 
/** 
*　調(diào)用Flex函數(shù) 
* @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; 
//調(diào)用Flex函數(shù)，傳參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="javascript:callFlex();" href="javascript:callFlex();">Call Flex</a> 
</td> 
</tr> 
</table> 
</center> 
</body> 
</html>

OK,兩種交互的方式已經(jīng)告訴大家了，快試試吧。
SWFObject使用補(bǔ)充：
swfobject.embedSWF()
swfobject.getObjectById("swfID")
swfobject.removeSWF("swfID")
一.swfobject.embedSWF：
內(nèi)嵌swf文件，這個(gè)函數(shù)的參數(shù)比較多swfobject.embedSWF(swfUrl, id, width, height, version,expressInstallSwfurl, flashvars,params, attributes)，各個(gè)參數(shù)具體功能如下：
swfUrl（String，必須的）指定SWF的URL。
id（String，必須的）指定將會(huì)被Flash內(nèi)容替換的HTML元素（包含你的替換內(nèi)容）的id。
width（String，必須的）指定SWF的寬。
height（String，必須的）指定SWF的高。
version（String，必須的）指定你發(fā)布的SWF對(duì)應(yīng)的Flash Player版本（格式為：major.minor.release）。
expressInstallSwfurl（String，可選的）指定express install SWF的URL并激活A(yù)dobe express install。
flashvars（String，可選的）用name:value對(duì)指定你的flashvars。
params（String，可選的）用name:value對(duì)指定你的嵌套o(hù)bject元素的params。
attributes（String，可選的）用name:value對(duì)指定object的屬性。
注意：在不破壞參數(shù)順序的情況下，你可以忽略可選參數(shù)。如果你不想使用一個(gè)可選參數(shù)，但是會(huì)使用后面的一個(gè)可選參數(shù)，你可以簡(jiǎn)單的傳入false作為參數(shù)的值。對(duì)flashvars、params和 attributes這些JavaScript對(duì)象來說，你也可以相應(yīng)的傳入一個(gè)空對(duì)象{}。
二.swfobject.getObjectById("swfId")
通過swfid獲得swf對(duì)象，通過該對(duì)象可調(diào)用flex函數(shù)。
三.swfobject.removeSWF("swfId")
通過swfId刪除swf。
注意：刪除swf這里需要提醒下，因?yàn)閑mbedSWF是替換標(biāo)簽，而不是填充。比如上面的例子<div id="myPanel">Flex content</div>，如果執(zhí)行了swfobject.removeSWF后，想重新添加SWF必須要重新創(chuàng)建<div id="myPanel">或者更改embedSWF的第二個(gè)參數(shù)更改替換新的標(biāo)簽ID。因?yàn)樵谶@里SWF替換了調(diào)了<div>

您可能感興趣的文章: