flex通信篇——flash与js
Flex与JS交互推荐用ExternalInterface，它可以让JS和AS互相调用其中函数，传递所有可接受的参数甚至是一些复杂的对象。Flex编译生成的文件是swf，其本质还是Flash，所以Flash能使用的通信方式，完全适用于Flex。几年前大家经常用fscommand与Flash的外部容器交互，此方法早已不适用。
在网页中嵌入swf很简单，但要保证其最好的交互性、数据的正确性是比较花费精力的，推荐使用SWFObject来嵌入FLASH。看过例子中你就会发现这些方式已经完全够用，所以才叫“完全手册”，本文用最简洁的语言描述，重点介绍数据传输。
?先看演示：
最简办法——URL变量
http://flexbaba.com/swf/TestLoaderinfo.swf?id=123&name=lukia&site=flexbaba.com
这样写的好处是明显、直观，但数据量大了，可能会有问题，IE的最大URL长度限制是2083字节，而实际可以使用的最大长度为2048字节。所以有些问题可以交给JS处理。
一、flex中调用js函数
?????? 1、传递的参数赋值
?????????????? var tmpObj:Object = new Object();
?? ??? ??? ??? ?tmpObj.tmpParam = "flex赋值";
?????? 2、直接调用js中的函数
?? ??? ??? ??? ?ExternalInterface.call("callByFlex",tmpObj);//FLEX中调用 JS中的函数
二、js调用flex中的函数
??????? 1、flex中的供js调用函数的注册?
?? ??? ??? ??? ?ExternalInterface.addCallback("flexfun",jsCallFun);//注册被JS调用的FLEX函数，flexfun为js调用的函数名，jsCallFun为flex实际对应的函数名
?????? 2、JS调用代码
??? ??? var swf = findSWF("swfId");
????? //传递参数赋值
??? ??? var tmpObj = {};
??? ??? tmpObj.inName="name";
??? ??? tmpObj.inPhone="phone";
??? ??? swf.flexfun(tmpObj);
function findSWF(movieName) {??
??????? if (navigator.appName.indexOf("Microsoft")!= -1) {??
??????????? return window[movieName];??
??????? } else {??
??????????? return document[movieName];??
??????? }
}
flex代码(flex4)：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
?creationComplete="init()"
?applicationComplete="showParams()">
?<mx:Script>
??<![CDATA[
???import mx.controls.Alert;
???import mx.core.FlexGlobals;
???import mx.rpc.xml.SimpleXMLDecoder;
???[Bindable]
???private var flashvars:String = "";//保存所有传入变量的名称及变量值
???[Bindable]
???private var jsObjvars:String = "";//保存JS中对象中的名称及变量值
???
???private function init():void{
????ExternalInterface.addCallback("paserXML",paserXML);
????//ExternalInterface.call("swfLoadedHandler");
???}
???private function showParams():void{
????//var info:Object = Application.application.loaderInfo.parameters;
????var info:Object = FlexGlobals.topLevelApplication.loaderInfo.parameters;
????flashvars = "";
????for(var varName:String in info){
?????flashvars += "name:"+varName+"\t\t value: "+info[varName]+"\n";
????}
???}
???
???private function paserXML(xmlstr:String):Object{
????Alert.show(xmlstr);
????//新建一个XML解析器
????var xmlDecoder:SimpleXMLDecoder = new SimpleXMLDecoder();
????//解析器的decodeXML方法可以将XMLDocument转化为Object
????var obj:Object = xmlDecoder.decodeXML(new XMLDocument(xmlstr));
????return obj;
???}
???private function showJSObject():void{
????var obj:Object = ExternalInterface.call("getJSObject");//调用JS中函数
????jsObjvars = "";
????for(var varName:String in obj){
?????jsObjvars += "name:"+varName+"\t\t value: "+obj[varName]+"\n";
????}
???}
??]]>
?</mx:Script>
?<mx:Button click="showParams()" label="Show Variables"/>
?<mx:TextArea text="{flashvars}" width="500" height="150"/>
?<mx:Button click="showJSObject()" label="Show JS Object"/>
?<mx:TextArea text="{jsObjvars}" width="500" height="150"/>
</mx:Application>
js代码：
<!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">
?<head>
??<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??<title>test</title>
??<script type="text/javascript" src="swfobject.js"></script>
??<script language="JavaScript" type="text/javascript">
/*
?//如果只有一个参数，就用这个。
?function getParameter(){
??var url=window.location .href;
??var aa=url.indexOf('=');
??
??if (aa == -1)
??return "";
??url=url.substring(aa+1);
??alert(url.substring(aa+1));
?}
*/
?// 如果有多个参数，就用这个函数。param 为 参数的名称
?function getParameter(param){
??var query = window.location.search;
??alert("query:"+query);
??var iLen = param.length;
??var iStart = query.indexOf(param);
??if (iStart == -1)
???return "";
??iStart += iLen + 1;
??var iEnd = query.indexOf("&", iStart);
??if (iEnd == -1)
???return query.substring(iStart);
??return query.substring(iStart, iEnd);
?}
?function getJSObject(){//构造一个复杂对象传给Flex
??var obj = new Object();
??obj.oid = 12;
??obj.arr = ["a","b","c"];
??obj.name = "an Object";
??return obj;
?}
?function thisSWF(swfID){//这个函数
??if (navigator.appName.indexOf("Microsoft") != -1) {
???return window[swfID];
??} else {
???return document[swfID];
??}
?}
?
?function swfLoadedHandler(){//JS处理XML的能力不强，我想把它转换成Object。可以靠Flex来实现
??var xmlStr="<sites><site name='adobe.com' id='0'/><site name='flexbaba.com' id='2'/><site name='sf.net' id='3'/></sites>";
??var obj = thisSWF("mySWF").paserXML(xmlStr);
??debugger
??alert("in js swfLoadedHandler");
?}
?
?alert(getParameter("id"));
?//alert(getParameter("id")+getParameter("name"));//这样可以取到某个特定的变量值
?//swfobject.embedSWF("TestLoaderinfo.swf“, "mySWF", "100%", "100%", "9.0.0");//不加参数只加载SWF
?//swfobject.embedSWF("TestLoaderinfo.swf?id="+getParameter("id")+"", "mySWF", "100%", "100%", "9.0.0");//取得某些参数
?swfobject.embedSWF("TestLoaderinfo.swf?"+"id=12&name=xxx", "mySWF", "100%", "50%", "9.0.0");
</script>
??<style type="text/css" media="screen">
html,body,#mySWF {
?height: 100%;
}
body {
?margin: 0;
?padding: 0;
?overflow: hidden;
}
</style>
?</head>
?<body style="margin: 0px; padding: 0px;">
??<button onclick="swfLoadedHandler()">调用flex方法</button>
??<div id="mySWF">
???<h1>
????您需要更新Flash Player
???</h1>
???<p>
????<a href="http://www.adobe.com/go/getflashplayer">取得新版Flash
?????Player</a>
???</p>
??</div>
?</body>
</html>
