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

文章来自：Blog-Java

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;
 }

 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

<?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>

index.html

<!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>

posted @ 2013-05-25 09:44 学海无涯1999 阅读(184) 评论(0) 收藏举报

刷新页面返回顶部

咚咚天天畑

生命必须有裂缝，阳光才能照进来!

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

as和js通信addcallback失效

公告