As和js通信问题完全解析（解决addcallback失效的问题）

as和js通信最早用的是fscommand,这个我就不说了，老生常谈了，我们这里说的是ExternalInterface这个接口。大家都知道的或者一帮在网上能查到的东西我就不费吐沫了，捡最实在的说。ExternalInterface有两个方法，一个是call，是as调用js，这个没什么说的，我们现在主要说addcallback这个函数，这个函数是as注册一个函数，然后让js通过调用flash这个object对象来调用as注册的这个函数。注意，我这里说的是“js调用flash这个object对象来调用as注册的这个函数”，这里我强调了先调用object对象，然后再调用函数，为什么要这么强调呢，因为大家在开发过程中会遇到两个坎，一个是调用flash对象调用不到，一个是调用函数调用不到了。下面我们就针对这两种情况进行详细说明。

           有很多朋友在开发过程中会遇到过下面这些情况，在开发一个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”];

  }

  }

 οnlοad=function(){

   pageInit();

  } 

</script>

注意，在getSWF函数里我用了 return window[movieName+”_ob”]和return document[movieName+”_em”]，为什么这样用我会在下面说明，一帮的情况下只需要用movieName就可以了

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对象，感觉绕了一大圈，但这是官方推荐的方法。在flash8的时候，我不知道这么用，采用了一种比较笨的办法，就是setTimeout执行addCallback来注册as函数，大家可能要问为什么这么麻烦。我再后面会说明。

       好了，现在我举两个最实际的例子，在我开发搜狗音乐盒的时候，因为播放音乐的工作完全交给mediaPlayer这个微软的Object。然后又要在flash里实时的显示歌曲的进度，音量等信息，不得不频繁的在as和js之间不停的调用，那段时间简直痛不欲生。而且mediaPlayer这个对象还有好多版本的内核，从6.4到11，当时我了解了不少这方面的信息，如果有同学对这个感兴趣，可以写mail给我。扯远了，继续说我们这个问题，当时产品上线的时候，在我本机的resin上测试，没有任何的问题，但是一上真实的生产环境，就出问题了，什么问题呢，IE和ff下是没有问题的，问题处在tt(就是腾讯那个浏览器)和遨游浏览器上，清掉浏览器的cache，没有问题，第2次刷新的时候，产生脚本错误，调用as函数失效。而在我本机怎么测都没有问题，后来发现原来是我本机没有设置resin的cache，既没有过期头。为什么一有cache as注册的函数就失效呢，这也是为什么cs3的时候出了一套规范的流程来规定如何使用addCallback,因为flash一旦在浏览器里cache住，如果在as里一开始就addcallback就会失效，至于为什么我到现在也说不清楚，解决的办法就是用官方的办法，如上的代码或者用我当时的笨办法

       setTimeOut(registerFun,50)

      registerfun就是实现addCallBack的函数，这样就能避免TT和遨游浏览器下如果cache住的时候，addcallback失效的问题。

      还有一个办法我没有尝试，就是如果你是 用Flash开发，把displayObject放在第一帧，而addCallback放到第二帧上，为什么这么做呢，这是我从Flex那得到的灵感，在Flex下，这样写，在Application里写

      creationComplete=initApp();然后在initApp里addCallback

    多说一句，Flex程序是分成两帧，第一帧是preload,第二帧才开始渲染界面，然后在Application下有三种状态preinitialize,initialize,creationComplete,这三个的意思分别就是在初始化前，初始化，和界面完全渲染完毕

       那么如果你在界面完全渲染完毕的时候addCallback,才能保证有效。

       现在我来解释为什么之前我用的return window[movieName+”_ob”]和return document[movieName+”_em”]，在IE下，如果object标签和embed表现用同样的id，通过js去访问flash对象的时候，IE会认不出，FF是没有问题的，至于为什么我不知道，所以，我当初在搜狐做视频播放器的时候采用这样的方式

       <object id=”player_ob” name=”player” classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0” width=”100%” height=”100%” align=”middle”>

<param name=”allowScriptAccess” value=”always” />

<param name=”movie” value=”Main.swf” />

<param name=”quality” value=”high” />

<param name=”allowFullScreen” value=”true” />

<embed id=”player_em” name=”player” src=”Main.swf” mce_src=”Main.swf” quality=”high” bgcolor=”#000000″ width=”100%” height=”100%” align=”middle”  allowScriptAccess=”always” allowFullScreen=”true” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

</object>

 然后你就知道我前面为什么那么写了，所以，劝解大家一句，尽量不要用那个swfObejct.js这个东西，as和js交互起来很麻烦。你可以自己写一个简单的insertFlash.js

function insertFlash(elm, url, w, h) {

 if (!document.getElementById(elm)) return;

 var str = ”;

 str += ‘<object width=”‘+ w +’” height=”‘+ h +’”  id=”demo” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0″>’;

 str += ‘<param name=”movie” value=”‘+ url +’”>’;

 str += ‘<param name=”quality” value=”high”>’;

  str += ‘<param name=”wmode” value=”Transparent”>’;

   str += ‘<param name=”allowscriptaccess” value=”always”>’;

 str += ‘<embed width=”‘+ w +’” height=”‘+ h +’” src=”‘+ url +’” quality=”autohigh” wmode=”opaque” type=”application/x-shockwave-flash” plugspace=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash“></embed>’;

 str += ‘</object>’;

 document.getElementById(elm).innerHTML = str;

}

 至于版本的判断和版本的升级，大家去Adobe官方网站去下检测包吧。我就不多废话了，不过上次我用了半天，检测版本号一直不对，检测是否安装倒是可以

 好了，先就写这些了，希望对同学们有所帮助