AS与JS相互通信(Flex中调用js函数)

speed847

目前，有些基于html的网页 内嵌了swf。html与swf之间的通信是很有必要的。从下面的文章中可以学到如何在flex代码中调用html页面的javascript函数。
附：html内嵌swf的代码
<object width="550" height="300">
<param name="movie" value="PTJ_Portal_Demo1.swf">
<embed src="PTJ_Portal_Demo1.swf" width="800" height="300">
</embed>
</object>
 
http://www.blogjava.net/Alpha/archive/2009/06/27/284373.html
 
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失效

参考原文：http://www.zhaohongri.cn/?p=14

情况一：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;
}

functionsetSwfIsReady(){
      swfReady=true;
   getSWF(”flashobj”).fun()
}
function pageInit(){
     jsReady=true;
}
function getSWF(movieName) {
   if (navigator.appName.indexOf(”Microsoft”)!= -1) {
    return window[movieName+”_ob”];
   } else {
    returndocument[movieName+”_em”];
   }
}
onload=function(){
   pageInit();
}
</script>
注意，在getSWF函数里用了 return window[movieName+”_ob”]和returndocument[movieName+”_em”]，在IE下，如果object标签和embed表现用同样的id，通过js去访问flash对象的时候，IE会认不出，FF是没有问题的
as部分
private function registerJsFun():void{
      if(ExternalInterface.available){
     try{
      varcontainerReady:Boolean=isContainerReady();
     //ExternalInterface.call(”ceshi”,”registerJsFun:”+containerReady);
     if(containerReady){
       //注册函数
       setupCallBacks();
     }else{
       //检测是否准备好
       var readyTimer:Timer=newTimer(100);
      readyTimer.addEventListener(TimerEvent.TIMER,timeHandler);
      readyTimer.start();
      }
     }catch(error:Error){
     trace(error)
     }
    }else{
     trace(”External interface is notavailable for this container.”);
    }
   }
  
private functiontimeHandler(event:TimerEvent):void{
varisReady:Boolean=isContainerReady();
      if(isReady){
  Timer(event.target).stop();
   setupCallBacks();
}
}

privatefunction isContainerReady():Boolean{
varresult:Boolean=Boolean(ExternalInterface.call(”isReady”));
returnresult;
}

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
<div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!-- <br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><?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.*;
      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>