Follow Flex After Dark on Twitter

Flex and JavaScript Integration

Use the ExternalInterface class for ActionScript-JavaScript communication.

ExternalInterface defines two especially important static functions:

  • call( functionName:String, ... arguments ) - call a container function
  • addCallback( functionName:String, closure:Function ) - expose a Flex function to the container

Examples

Call Browser/JavaScript from ActionScript

Calling JavaScript from ActionScript is easy with ExternalInterface . Simply call the static call() function passing the function name and, optionally, any arguments.

   // call a JavaScript function defined in the container page
   var result:String = 
      ExternalInterface.call( "doSomethingInJavaScript", arg1, arg2 );

The above ActionScript code could call the below JavaScript code in the container HTML page:

   // a JavaScript function in the container HTML page
   function doSomethingInJavaScript( arg1, arg2 )
   {
      // do something
      return "results for " + arg1 + " and " + arg2;
   }

Call ActionScript from JavaScript/Browser

Calling ActionScript from JavaScript again requires use of the ExternalInterface class. First we must use the addCallback() function to expose the ActionScript function we want to call to the container.

   public function init():void
   {
      // expose an ActionScript function to the container
      ExternalInterface.addCallback( "doSomethingInActionScript", doSomethingInActionScript );
   }
   
   // function now callable from JavaScript
   public function doSomethingInActionScript( arg1:String, arg2:Number ):String
   {
      return "result";
   }

The below JavaScript code can be used to call the exposed ActionScript function:

   // get the Flex application (Flash object)
   var isIE = navigator.appName.indexOf("Microsoft") != -1;
   var flashName = "flashObjectName";
   var flashObject = (isIE) ? parent.Main.window[flashName] : document[flashName];
   
   if( flashObject )
   {
      // call the Flex application (Flash object)
      flashObject.doSomethingInActionScript( "arg1", 2 );
   }

Make sure the Flex application has been initialized and the function callback has been registered before the JavaScript call.

Related Links:

Related Docs
  • ActionScript ExternalInterface ActionScript's ExternalInterface class and IExternalInterface interface allow for two-way communication between ActionScript and browser JavaScript.
Recent Docs
  • Flex and JavaScript Integration Integrating Flex and JavaScript for two-way communication with ActionScript and ExternalInterface.
  • MXML Namespaces Overview of MXML Namespaces and how to use custom components in MXML.
  • MXML Component MXML Component
  • Flex Libraries A Library is collection of Flex/ActionScript classes and resources compiled to a .swc file.
  • Flex Remoting Flex Remoting and the RPC package provide robust, asynchronous communication with remote servers via HTTP and Web Services.
Random Docs
  • ActionScript StyleManager The ActionScript StyleManager class is used for registering styles used in a Flex application.
  • Flex Data Providers Several Flex components, including all list-based controls, display data from a data provider, a collection or object that contains the data displayed by the control.
  • Flex Text Controls Flex Text Controls allow the display and input of simple and rich HTML text.
  • Flex Canvas The Flex Canvas container can be used for absolute layout and position of children.
  • Flex Images and Icons Overview of using images and icons in Flex projects.