AS与JS相互通信(Flex中调用js函数)
Flex中As调用Js的方法是:
1、导入包 (import flash.external.ExternalInterface;)
2、使用ExternalInterface.call("Js函数名称",参数)进行调用,其返回的值就是Js函数所返回的值
Js调用As的方法是:
1、导入包 (import flash.external.ExternalInterface;)
2、在initApp中使用ExternalInterface.addCallback("用于Js调用的函数名",As中的函数名)进行注册下
3、js中 就可以用document.getElementById("Flas在Html中的ID").注册时设置的函数名(参数)进行调用
as和js通信addcallback失效
情况一:flash一旦在浏览器里cache住,如果在as里一开始就addcallback就会失效
情况二:一个js函数上来就调用as的一个函数的时候,页面会报错,提示找不到这个flash对象,或者函数没有定义。Flash8的时代,针对
ExternalInterface这个类,文档里只说明了怎么用,而没有具体说怎么合理的组织和页面的结构,一直到了cs3的时代,帮助里才说明了正确
的函数注册和js调用的过程,具体的见Flash cs3帮助。大概的代码如下:
js部分:
<script>
var jsReady=false;
var swfReady=false;
function
isReady(){
return jsReady;
}
function
setSwfIsReady(){
swfReady=true;
getSWF(”flashobj”).fun()
}
function
pageInit(){
jsReady=true;
}
function
getSWF(movieName) {
if (navigator.appName.indexOf(”Microsoft”)
!= -1) {
return window[movieName+”_ob”];
}
else {
return document[movieName+”_em”];
}
}
onload=function(){
pageInit();
}
</script>
注意,在getSWF函数里用了 return window[movieName+”_ob”]和return document[movieName+”_em”],在IE下,如果object标签和embed表现用同样的id,通过js去访问flash对象的时 候,IE会认不出,FF是没有问题的
as部分
private
function registerJsFun():void{
if(ExternalInterface.available){
try{
var
containerReady:Boolean=isContainerReady();
//ExternalInterface.call(”ceshi”,”registerJsFun:”+containerReady);
if(containerReady){
//注册函数
setupCallBacks();
}else{
//检测是否准备好
var readyTimer:Timer=new
Timer(100);
readyTimer.addEventListener(TimerEvent.TIMER,timeHandler);
readyTimer.start();
}
}catch(error:Error){
trace(error)
}
}else{
trace(”External interface is not available
for this container.”);
}
}
private function timeHandler(event:TimerEvent):void{
var
isReady:Boolean=isContainerReady();
if(isReady){
Timer(event.target).stop();
setupCallBacks();
}
}
private function
isContainerReady():Boolean{
var
result:Boolean=Boolean(ExternalInterface.call(”isReady”));
return
result;
}
private function
setupCallBacks():void{
ExternalInterface.addCallback(”fun”,fun);
ExternalInterface.call(”setSwfIsReady”);
}
具体我就不解释了,不明白的可以仔细去看下cs3帮助,大概的意思就是页面开始渲染的时候js去调用swf对象,有可能swf对象没有完全 load完,所以这个触发器要从flash开始,当flash加载的时候就开始不停的调用页面的一个函数,取一个页面是否加载完毕的标识,当 pageonLoad后,这个标识为true了,说明flash也加载完毕了,这个时候flash再开始注册函数,同时调用页面的js,让js调用 Flash对象
实例:a.mxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 |
<?xml version= "1.0"
encoding= "utf-8" ?> <mx:Script> <![CDATA[ import
flash.external.*; public function
asFunc():String { return
sending_ti.text; } public function
initApp():void { //AddCallback方法允许javascript调用flash时间上函数 ExternalInterface.addCallback( "flexFunctionAlias" , asFunc); } public function
callWrapper():void { var
f:String = "changeDocumentTitle" ; //ExternalInterface.call(functionName:String,Parameters)可以调用javascript函数 //参数1: functionName – 你想要调用的javascript函数名要以字符串的形式 //参数2: Parameters – 需要传递给javascript函数的参数,用逗号分开,是可选的。 var
getJSValue:String = ExternalInterface.call(f, "New Title" ); received_ti.text = getJSValue; } ]]> </mx:Script> <mx:Button id= "send_button"
x= "368"
y= "100"
click= "initApp();"
label= "发送"
fontSize= "12"
width= "62" /> <mx:TextInput id= "received_ti"
x= "148"
y= "62"
width= "203"
fontSize= "12" /> <mx:TextInput id= "sending_ti"
x= "148"
y= "100"
width= "203"
fontSize= "12" /> <mx:Label x= "105"
y= "65"
text= "收到"
fontSize= "12" /> <mx:Label x= "105"
y= "103"
text= "发送"
fontSize= "12" /> <mx:Button x= "368"
y= "64"
click= "callWrapper();"
label= "接收"
fontSize= "12"
width= "62" /> </mx:Application> |
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 |
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd nowrap HTML 4.01 Transitional//EN" > <html> <head> <base target= "_self" > <title></title> <meta http-equiv= "Content-Type"
content= "text/html; charset=utf-8"
/> <meta http-equiv= "pragma"
content= "no-cache" > <meta http-equiv= "cache-control"
content= "no-cache" > <meta http-equiv= "expires"
content= "0" > </head> <script language= "JavaScript" > function
callApp() { var
x = MyFlexApp.flexFunctionAlias(); document.getElementById( ‘receivedField‘ ).value = x; } function
changeDocumentTitle(a) { window.document.title=a; return
document.getElementById( ‘sendField‘ ).value; } </script> <body style= ‘overflow-x:hidden;overflow-y:hidden‘ > <form name= "htmlForm" > 数据发送给AS: <input type= "text"
id= "sendField"
/> <input type= "button"
value= "发送"
onclick= ""
/><br /> <br /> 接收AS的数据: <input type= "text"
id= "receivedField" > <input type= "button"
value= "接收"
onclick= "callApp();"
/><br /> </form> <OBJECT id= "MyFlexApp"
classid= "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH= "100%"
HEIGHT= "500" > <PARAM NAME=movie VALUE= "joinJS.swf" > <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noborder> <PARAM NAME=bgcolor VALUE= #000000> <EMBED src= "joinJS.swf"
quality=high WIDTH= "100%"
HEIGHT= "500"
scale=noborder bgcolor= #000000 NAME="TH2"TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </body> |
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。