2011-09-22 83 views
0

我需要知道为什么JavaScript无法与Flex交谈。 我有一个项目将使用JavaScript来播放给定的视频文件。它运行在一个自定义的MVC框架中,资源文件通过前缀/static加载。从JavaScript调用Adobe Flex/ActionScript方法?

http://helloworld/static/swf/movie.swf`

我编译使用mxmlc二进制的选项-static-link-runtime-shared-libraries=true-use-network=true--debug=true我的Flex应用程序。

的Flex

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    creationComplete="init()"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.controls.Alert; 
      import flash.external.ExternalInterface; 
      private function init():void { 
       log("Logging..."); 
       if (ExternalInterface.available) { 
        ExternalInterface.call("HelloWorld.initFlash"); 
        ExternalInterface.addCallback("playVideo", playVideo); 
       } 
      } 
      public function playVideo():void { 
       log("Playing video..."); 
      } 
      public function log(message:String):void { 
       if (ExternalInterface.available) { 
        ExternalInterface.call(
         "function log(msg){ if (window.console) { console.log(msg); } }", 
         message); 
       } 
      } 
     ]]> 
    </fx:Script> 
    <s:Panel id="myPanel" title="Hello World" x="20" y="20"> 
     <s:layout> 
      <s:HorizontalLayout 
       paddingLeft="10" 
       paddingRight="10" 
       paddingTop="10" 
       paddingBottom="10" 
       gap="5" /> 
     </s:layout>  
    </s:Panel> 
</s:Application> 

HTML

<!DOCTYPE HTML> 
<html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Hello World</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
     <script type="text/javascript"> 
      $(function(){ 
       var swfVersionStr  = "10.1.0"; 
       var xiSwfUrlStr   = "playerProductInstall.swf"; 
       var flashvars   = {}; 
       var params    = {}; 
       var attributes   = {}; 
       params.allowscriptaccess = "sameDomain"; 
       params.quality   = "high"; 
       params.bgcolor   = "#FFFFFF"; 
       params.allowfullscreen = "true"; 
       attributes.id   = "HelloWorld"; 
       attributes.name   = "HelloWorld"; 
       attributes.align   = "left"; 
       swfobject.embedSWF( 
        "HelloWorld.swf", 
        "flash-content", 
        "100%", "100%", 
        swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); 
       HelloWorld = function(){ 
        return { 
         initFlash : function() { 
          console.log("Called from Flex..."); 
          console.log($("#HelloWorld").get(0).playVideo("be6336f9-280a-4b1f-a6bc-78246128259d")); 
         } 
        } 
       }(); 
      }); 
     </script> 
     <style type="text/css"> 
      #flash-content-container { 
       width : 400px; 
       height : 300px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="layout"> 
      <div id="header"><h1>Hello World</h1></div> 
      <div id="flash-content-container"> 
       <div id="flash-content"></div> 
      </div> 
     </div> 
    </body> 
</html> 

输出

Logging... 
Called from Flex... 
+0

你看这篇文章? http://livedocs.adobe.com/flex/3/html/help.html?content=passingarguments_5.html – Joe

+0

我想我已经查看了ExternalInterface上的每个参考页面,并尝试了这些示例,但无法正常工作。对其他资源可能有所帮助的任何建议。在我的代码中,Flex可以与JavaScript交谈,但不是相反 – ezraspectre

回答

1

我有同样的问题,在克里斯Cashwell提供的链接,它显示了解决方案的基础。

Flex的MXML

<?xml version="1.0" encoding="utf-8"?> 
    <s:Application 
     xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     creationComplete="init()"> 
     <fx:Script> 
      <![CDATA[ 
       import mx.controls.Alert; 
       import flash.external.ExternalInterface; 
       private function init():void { 
        consoleLog("Hello World"); 
        try 
        { 
         Security.allowDomain("*"); //I need to add this. 
         ExternalInterface.marshallExceptions = true; 
         ExternalInterface.addCallback("sendAlert",sendAlert); 
         ExternalInterface.call("initCallBack"); 
        } catch (error:Error) { 
         consoleLog("Error in ExternalInterface");       
         consoleLog("Error" + error.message); 
        } 
       } 
       public function sendAlert(s:String):void 
       { 
        Alert.show(s); 
       } 
       public function consoleLog(message:String):void { 
        if (ExternalInterface.available) { 
         ExternalInterface.call(
          "function log(msg){ if (window.console) { console.log(msg); } }", 
message); 
        } 
       } 
      ]]> 
     </fx:Script> 
     <s:Panel id="panel1" title="Hello World" x="20" y="20"> 
      <s:layout> 
       <s:HorizontalLayout 
        paddingLeft="10" 
        paddingRight="10" 
        paddingTop="10" 
        paddingBottom="10" 
        gap="5" /> 
      </s:layout> 
      <s:TextArea id="textarea1" 
       width="300" height="100" 
       text="Hello World" />  
     </s:Panel> 
    </s:Application> 

HTML

<!DOCTYPE HTML> 
<html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Hello World</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
     <script type="text/javascript"> 
      var flexApp; 
      function initCallBack() { 
       flexApp = document.getElementById("HelloWorldFlex"); 
       if (flexApp != undefined) { 
        try { 
         flexApp.sendAlert("Hello World"); 
        } catch(err) { 
         console.log("There was an error on the flex callback."); 
         console.log(err);  
        } 
       } else { 
        console.log("The flex object does not exist yet"); 
       } 
       return; 
      } 
      $(function(){ 
       HelloWorld = function(){ 
        return { 
         init : function() { 
          var swfVersionStr  = "10.1.0"; 
          var xiSwfUrlStr   = "playerProductInstall.swf"; 
          var flashvars   = { 
           bridgeName : "flex", 
          }; 
          var params    = {}; 
          var attributes   = {}; 
          params.allowscriptaccess = "always"; 
          params.quality   = "high"; 
          params.bgcolor   = "#FFFFFF"; 
          params.allowfullscreen = "true"; 
          attributes.id   = "HelloWorldFlex"; 
          attributes.name   = "HelloWorldFlex"; 
          attributes.align   = "left"; 
          swfobject.embedSWF( 
           "HelloWorld.swf", 
           "flash-content", 
           "100%", "100%", 
           swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); 

         } 
        } 
       }(); 
       HelloWorld.init(); 
      }); 
     </script> 
     <style type="text/css"> 
      #flash-content-container { 
       width : 400px; 
       height : 300px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="layout"> 
      <div id="header"><h1>Hello World</h1></div> 
      <div id="flash-content-container"> 
       <div id="flash-content"></div> 
      </div> 
     </div> 
    </body> 

我测试的Flex 4.1,请注意,我不得不添加的bin-debug文件夹(C:\ flexworkspaces \项目\ bin-调试)到Flash安全应用程序(http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.htmlconfiguration)请注意,该互联网URL实际上是一个修改Flex本地配置的应用程序。

日志可以显示在Firebug控制台中。

-1

决定去FABridge。对于其他人继承一个工作的例子。

MXML

<?xml version="1.0" encoding="utf-8"?> 
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:bridge="bridge.*" 
    creationComplete="init()"> 
    <fx:Declarations> 
     <bridge:FABridge bridgeName="flex" /> 
    </fx:Declarations> 
    <fx:Script> 
     <![CDATA[ 
      import mx.controls.Alert; 
      import flash.external.ExternalInterface; 
      private function init():void { 
       consoleLog("Hello World"); 
      } 
      public function sendAlert(s:String):void 
      { 
       Alert.show(s); 
      } 
      public function consoleLog(message:String):void { 
       if (ExternalInterface.available) { 
        ExternalInterface.call(
         "function log(msg){ if (window.console) { console.log(msg); } }", 
         message); 
       } 
      } 
     ]]> 
    </fx:Script> 
    <s:Panel id="panel1" title="Hello World" x="20" y="20"> 
     <s:layout> 
      <s:HorizontalLayout 
       paddingLeft="10" 
       paddingRight="10" 
       paddingTop="10" 
       paddingBottom="10" 
       gap="5" /> 
     </s:layout> 
     <s:TextArea id="textarea1" 
      width="300" height="100" 
      text="Hello World" />  
    </s:Panel> 
</s:Application> 

HTML

<!DOCTYPE HTML> 
<html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Hello World</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
     <script type="text/javascript" src="bridge/FABridge.js"></script> 
     <script type="text/javascript"> 
      var flexApp; 
      var initCallback = function() { 
       flexApp = FABridge.flex.root(); 
       var textarea1 = flexApp.getTextarea1(); 
       textarea1.setText("Hello World (Updated)"); 
       flexApp.sendAlert("Hello World"); 
       return; 
      } 
      $(function(){ 
       HelloWorld = function(){ 
        return { 
         init : function() { 
          var swfVersionStr  = "10.1.0"; 
          var xiSwfUrlStr   = "playerProductInstall.swf"; 
          var flashvars   = { 
           bridgeName : "flex", 
          }; 
          var params    = {}; 
          var attributes   = {}; 
          params.allowscriptaccess = "sameDomain"; 
          params.quality   = "high"; 
          params.bgcolor   = "#FFFFFF"; 
          params.allowfullscreen = "true"; 
          attributes.id   = "HelloWorld"; 
          attributes.name   = "HelloWorld"; 
          attributes.align   = "left"; 
          swfobject.embedSWF( 
           "HelloWorld.swf", 
           "flash-content", 
           "100%", "100%", 
           swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); 
          FABridge.addInitializationCallback("flex", initCallback); 
         } 
        } 
       }(); 
       HelloWorld.init(); 
      }); 
     </script> 
     <style type="text/css"> 
      #flash-content-container { 
       width : 400px; 
       height : 300px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="layout"> 
      <div id="header"><h1>Hello World</h1></div> 
      <div id="flash-content-container"> 
       <div id="flash-content"></div> 
      </div> 
     </div> 
    </body> 
</html>