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

通过带参数的URL访问SWF

这样写的好处是明显、直观，但数据量大了，可能会有问题，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;
}

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>

扫描二维码关注公众号，回复： 2609495 查看本文章

flex通信篇——flash与js

猜你喜欢