Flex与Javascript其间的交互

2012-08-21

Flex与Javascript之间的交互转：http://blog.csdn.net/hopestar2/archive/2010/06/29/5702171.aspx?最近做

Flex与Javascript之间的交互

转：http://blog.csdn.net/hopestar2/archive/2010/06/29/5702171.aspx

最近做的一个项目要用到Flex与Javascrip之间的交互，所以花时间学习了一下。在

网上找了好多关于这方面的文章，但是介绍的都不是很全面，主要是例子程序写的不是很

好，很多都还存在一些问题，download下来后，发现还要做些修改才能运行。

????? 先分别简要介绍一下Flex调用Javascript函数和Javascript调用Flex函数。

????? 1. Flex调用Javascript函数

????? Flex通过使用ExternalInterface.call()函数来调用Javascript中的方法，此函数的原型为

ExternalInterface.call(function_name:String, parameter:String),参数function_name

是调用的javascript的函数名，parameter是Javacript函数需要的参数。此函数还可以有返回值

，也就是说Javascript函数可以返回一个结果给ExternalInterface.call()这个函数调用.ExternalInterface

封装了对浏览器支持的检查，可以用available属性来查看。

????? 先举个简单的例子：

????? Javascript函数：

????? function sayHelloFromJs(message)

????? {

????????????? alert(message);? //message是由flex端传过来的

????????????? return "echo from javascript:" + message; //返回给Flex端的消息

?????? }

????? Flex调用：

????? var str:String = ExternalInterface.call("sayHelloFromJs","Hello,Javascript.");

????? Alert.show(str); //显示javascript端返回的消息

????? 2. Javascript调用Flex函数：

?????? Flex端需要注册和页面交互的Javascript方法。通过ExternalInterface的addCallback()函数实现，

addCallback()函数的原型为addCallback(js_function:String, flex_function:Function)，第一个参数

js_function是Javascript可以调用的方法名称，第二个参数flex_function是Javascript回调的Flex方法.

????? 举个简单的例子：

????? Flex端：

????? public function sayHelloFromFlex(message:String):String

???? {

?????????? Alert.show(message); //Javascript端传过来的消息

?????????? var str:String = "echo from flex:" + message;

?????????? return str; //返回给Flex端的消息

???? }

???? public function initApp()

???? {

??????????? ExternalInterface.addCallback("sayHelloFromFlex",sayHelloFromFlex);//注册与页面交互的方法

???? }

???? Javascript端：

???? 在javascript端首先要获取swf对象的引用，我们假设我们已经拿到了该引用，为MyFlexApp.

swf的获取将在下面专门介绍。

???? <script language = 'Javacript' charset = 'uft-8'>

???? function testFlexFunc()

???? {

?????????? var strMessage = MyFlexApp.sayHelloFromFlex("Hello, Flex");

?????????? alert(strMessage);

???? }

??? </script>

??? <button onclick="testFlexFunc()"> TestFlexFunc</button>

????? 3.? Javascript端获取swf对象的引用：

????? 在Javascript代码中，我们首先要定义一个object标签对象，object标签对象的大概格式

如下：

?<param name='allowScriptAccess' value='always' />
?<param name='movie' value='FlexAndJs.swf' />
?<param name='quality' value='high' />
?<param name='scale' value='noScale' />
?<param name='wmode' value='transparent' />

</object>

?? 定义好这个节点标签后，我们还需要在写一个JS函数来获取该swf对象的引用。

function getSWFObject(movieName)

{

?? if(document[movieName])
?? {
???????? return document[movieName];
?? }else if(window[movieName]){
??????? return window[movieName];
?? }else if(document.embeds && document.embeds[movieName]){
??????? return document.embeds[movieName];
?? }else{
??????? return document.getElementById(movieName);
?? }

}

?? 然后上面2中的testFlexFunc()函数的那条调用Flex函数的语句可以改写为:

var strMessage = getSWFObject["MyFlexApps"].sayHelloFromFlex("Hello, Flex");

最后给出一个完整的例子供大家参考，包括Flex端和JS端的完整代码：

Flex代码：

?<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()"
layout="absolute" width="200" height="160">
<mx:Script>
?<![CDATA[
? import mx.controls.Alert;
? public function sayHelloFromFlex(message:String):String{
?? Alert.show(message);
?? var str:String = "Echo from Flex: "+ message;
?? return str;
? }
? public function initApp():void {
?? Security.allowDomain("*");
?? Security.allowInsecureDomain("*");
?? ExternalInterface.addCallback("sayHelloFromFlex",sayHelloFromFlex);
? }
? public function invokeJsFunc():void {
?? var str:String = ExternalInterface.call("sayHelloFromJs","Hello,Javascript.");
?? Alert.show(str);
? }????
?]]>
</mx:Script>
<mx:Button x="39" y="68" label="Invoke JS Function" click="invokeJsFunc()"/>
</mx:Application>

Html代码：

<html>
? <head> </head>
? <body scroll="no">
? <script>
? function sayHelloFromJs(value){
??????? alert(value);
??????? return "Echo from Js: " + value;
??? }
?
? function invokeFlexFunc(){
??????? var message = "Hello,Flex.";
??????? var str = getSWFObject("MyFlexApps").sayHelloFromFlex(message);
??????? alert(str);
??? }
? function getSWFObject(movieName)
? {
?? if(document[movieName])
?? {
??? return document[movieName];
?? }else if(window[movieName]){
??? return window[movieName];
?? }else if(document.embeds && document.embeds[movieName]){
??? return document.embeds[movieName];
?? }else{
??? return document.getElementById(movieName);
?? }
? }
</script>
? <object type='application/x-shockwave-flash'
?data='FlexAndJs.swf' width='200' height='160'
?name='test' id='MyFlexApps'>
?<param name='allowScriptAccess' value='always' />
?<param name='movie' value='FlexAndJs.swf' />
?<param name='quality' value='high' />
?<param name='scale' value='noScale' />
?<param name='wmode' value='transparent' />
? </object>
? <input type="button" value="InvokeFlexFunction" onclick="invokeFlexFunc()"/>
? </body>
</html>

怎样配置你的Flash内容？
你可以为你的object元素添加下面这些常用的可选属性（attributes）[ http://www.w3schools.com/tags/tag_object.asp ]：

id
name
styleclass（不使用class，因为class也是ECMA4的保留关键字）
align
你可以使用下面这些专用于Flash的可选param元素[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]：

play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flahvars
devicefont [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331 ]
allowscriptaccess [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494 ]
seamlesstabbing [ http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html ]
allowfullscreen [ http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html ]
allownetworking [ http://livedocs.adobe.com/flash/9.0/main/00001079.html ]
怎样用JavaScript对象来定义你的flashvars、params和attributes？
你最好用对象的字面量（Object literal notation）来定义JavaScrpt对象，例如这样：

var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
?

你可以在定义对象的时候添加你的name:value对（注意：请确保不要再对象中的最后一个name:value对后面加上逗号）：

var flashvars = {
name1: “hello“,
name2: “world“,
name3: “foobar“
};
var params = {
menu: “false“
};
var attributes = {
id: “myDynamicContent“,
name: “myDynamicContent“
};

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
或者在对象创建之后用点号添加属性（properties）和值：

var flashvars = {};
flashvars.name1 = “hello“;
flashvars.name2 = “world“;
flashvars.name3 = “foobar“;

var params = {};
params.menu = “false“;

var attributes = {};
attributes.id = “myDynamicContent“;
attributes.name = “myDynamicContent“;

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
?

上面的代码也可以这样写（为那些喜欢俏皮话的顽固脚本程序员准备的不易读的简写版本（the less readable shorthand version for the die-hard scripter who love one-liners））：

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, {name1:“hello“,name2:“world“,name3:“foobar“}, {menu:“false“}, {id:“myDynamicContent“,name:“myDynamicContent“});

</script>
?

如果你不想使用一个参数，你可以将它定义为false或者一个空对象：

var flashvars = false;
var params = {};
var attributes = {
id: “myDynamicContent“,
name: “myDynamicContent“
};

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
?

flashvars对象是一个为了增加易用性而设计的作为快捷方式的参数，所以你可以先忽略它，然后在params对象中指定你的 flashvars：

var flashvars = false;
var params = {
menu: “false“,
flashvars: “name1=hello&name2=world&name3=foobar“
};
var attributes = {
id: “myDynamicContent“,
name: “myDynamicContent“
};

swfobject.embedSWF(“myContent.swf“, “myContent“, “300“, “120“, “9.0.0“,“expressInstall.swf“, flashvars, params, attributes);

</script>
?

提示：使用SWFObject 2.0 HTML和JavaScript代码生成器（SWFObject 2.0 HTML and JavaScript generator）来帮助你创建代码：[ http://code.google.com/p/swfobject/wiki/SWFObject_2_0_generator ]。

热点排行