Flex与JS交互完全攻略

转自http://www.flexbaba.com/?p=47

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

通过带参数的URL访问SWF

这样写的好处是明显、直观,但数据量大了,可能会有问题,IE的最大URL长度限制是2083字节,而实际可以使用的最大长度为2048字节。所以有些问题可以交给JS处理。

http://flexbaba.com/swf/index.html?id=123&name=lukia&site=flexbaba.com

这次再点击按钮“Show JS Object”,就可以调用JS中的函数,把它的对象读进来了。

再看代码:

代码下载地址 http://www.flexbaba.com/wp-content/uploads/2009/02/flashvars.rar

以下是Flex代码:

 <?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.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;

  flashvars = “”;

  for(var varName:String in info){

  flashvars += “name:”+varName+”\t\t value: “+info[varName]+”\n”;

  }

  }

   

  private function paserXML(xmlstr:String):Object{

  //新建一个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>

 loaderInfo这个属性,只有被加载的SWF, JPEG, GIF, PNG才有。
而这个Application 本身就是一个SWF。所以有加载器信息。可以外部容器给它传参数。
测试的方法很多。我一开始用傲游在本地测试,不成功,费了好长时间。。。
后来拿FF本地测试可以。
之后放在服务器上,所有的浏览器都可以了。。。

以下是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;
  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(obj);
 }
 
 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”+window.location.search, “mySWF”, “100%”, “100%”, “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;”>
<div id=”mySWF”>
<h1>您需要更新Flash Player</h1>
<p><a href=”http://www.adobe.com/go/getflashplayer“>取得新版Flash
Player</a></p>
</div>


</body>
</html>

posted @ 2010-07-16 15:22 子福当自强 阅读(...) 评论(...) 编辑 收藏
悟道2012