Flex Javascript互動實現代碼

來源:互聯網
上載者:User

關鍵字:ExternalInterface
所用類庫:SWFObject
/**
* Flex調用Javascript函數
* @params functionName:String Javascript函數名稱
* @params ...params Javascript函數參數
* @return 返回Javascript函數的return內容
**/
ExternalInterface.call(functionName:String, ...params);
main.mxml 複製代碼 代碼如下:<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<!--[CDATA[
import flash.external.ExternalInterface;
import mx.utils.ObjectUtil;
/**
* 調用Java script 函數
* @params evt:MouseEvent
* @return void
**/
private function myClick(evt:MouseEvent):void {
var item:Object = new Object();
item.name = "Dante";
item.address = "Beijing";

var results:Object = ExternalInterface.call("myfunc",item);
//results為myfunc函數返回的對象
trace(ObjectUtil.toString(results));
}
]]-->
</mx:Script>

<mx:Button label="Click me" click="myClick(event);"/>
</mx:Application>

index.html 複製代碼 代碼如下:/**
* 被Flex調用的 myfunc函數
* @params item 對象
* @return results 返回一個對象給Flex
**/
function myfunc(item) {
alert(item.name+"--"+item.address);

//建立對象
var results = {};
results .name= "dante";
results .age = 23;
results .sex = "man";
return obj;
}

/**
* Javascript調用Flex函數
* @params functionName:String Javascript調用Flex函數名
* @params closure:Function Flex將要調用的函數
* @return void
**/
ExternalInterface.addCallback(functionName:String,closure:Function);
main.mxml 複製代碼 代碼如下:<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" initialize="initApp()">
<mx:Script>
<!--[CDATA[
import flash.external.ExternalInterface;
import mx.utils.ObjectUtil;
/**
* initApp
* @return void
**/
private function initApp():void {
//註冊列表
ExternalInterface.addCallback("saveD",saveData);

//HTML 與 FLEX互動
//params.flashvars = "xmlPath=hello&name=dante";
var item:Object = Application.application.parameters;
trace("xmlPath:"+item.xmlPath ,"name:" + item.name);
}
/**
* saveData
* @params item:Object java script 傳過來的參數
* @return void
**/
private function saveData(item:Object):void {
trace("javascript調用Flex函數成功!");
nameTxt.text = item.name;
}
]]-->
</mx:Script>
<mx:TextInput id="nameTxt"/>
</mx:Application>

index.html

HTML內嵌swf檔案,我用的SWFObject,個人認為是一個很好的類庫,簡化了包含代碼。
注意 :javascript調用Flex的函數,必須要獲得swf的ID,可以通過document.getElementById(),也可以使用swfobject.getObjectById()。 複製代碼 代碼如下:<!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" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/swfobject.js" src="js/swfobject.js" type="text/javascript"></script>
<title>SWFObject</title>
<script type="text/javascript" language="javascript"><!--
var flashvars = false;
var params = {};
params.flashvars = "xmlPath=hello&name=dante";
var attributes = {};
//ID,也就是swf的ID,這個ID很重要,通過它調用flex的方法
attributes.id = "swf01";
 
//內嵌swf檔案,這個embedSWF方法,我在最後的補充會說下
swfobject.embedSWF("swf/main.swf","myPanel","300","200","9.0.0","swf/expressInstall.swf",flashvars,params,attributes);
/**
* 調用Flex函數
* @return void
**/
function callFlex(item) {
//通過ID獲得swf,也可以使用document.getElementById();
//var swf = document.getElementById("swf01");
var swf = swfobject.getObjectById("swf01");
var item = {};
item.name = document.getElementById("nameTxt").value;
//調用Flex函數,傳參item:Object
swf.saveD(item);
}
// --></script>
</head>
<body>
<center>
<div id="myPanel">Flex content</div>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="nameTxt"/></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:callFlex();" href="javascript:callFlex();">Call Flex</a>
</td>
</tr>
</table>
</center>
</body>
</html>

OK,兩種互動的方式已經告訴大家了,快試試吧。
SWFObject使用補充:
swfobject.embedSWF()
swfobject.getObjectById("swfID")
swfobject.removeSWF("swfID")
一.swfobject.embedSWF:
內嵌swf檔案,這個函數的參數比較多swfobject.embedSWF(swfUrl, id, width, height, version,expressInstallSwfurl, flashvars,params, attributes),各個參數具體功能如下:
swfUrl(String,必須的)指定SWF的URL。
id(String,必須的)指定將會被Flash內容替換的HTML元素(包含你的替換內容)的id。
width(String,必須的)指定SWF的寬。
height(String,必須的)指定SWF的高。
version(String,必須的)指定你發布的SWF對應的Flash Player版本(格式為:major.minor.release)。
expressInstallSwfurl(String,可選的)指定express install SWF的URL並啟用Adobe express install。
flashvars(String,可選的)用name:value對指定你的flashvars。
params(String,可選的)用name:value對指定你的嵌套object元素的params。
attributes(String,可選的)用name:value對指定object的屬性。
注意 :在不破壞參數順序的情況下,你可以忽略選擇性參數。如果你不想使用一個選擇性參數,但是會使用後面的一個選擇性參數,你可以簡單的傳入false作為參數的值。對flashvars、params和 attributes這些JavaScript對象來說,你也可以相應的傳入一個Null 物件{}。
二.swfobject.getObjectById("swfId")
通過swfid獲得swf對象,通過該對象可調用flex函數。
三.swfobject.removeSWF("swfId")
通過swfId刪除swf。
注意 :刪除swf這裡需要提醒下,因為embedSWF是替換標籤,而不是填充。比如上面的例子<div id="myPanel">Flex content</div>,如果執行了swfobject.removeSWF後,想重新添加SWF必須要重新建立<div id="myPanel">或者更改embedSWF的第二個參數更改替換新的標籤ID。因為在這裡SWF替換了調了<div>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.