天天看點

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">

 // 如果有多個參數,就用這個函數。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 οnclick="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>