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>