Accessing Flex from JavaScript -- Flex 2.01

You can call Flex methods from your enclosing wrapper by using the ExternalInterface API. You do this by adding a public method in your Flex application to a list of callable methods. In your Flex application, you add a local Flex function to the list by using the addCallback() method of the ExternalInterface API. This method registers an ActionScript method as callable from the JavaScript or VBScript in the wrapper.

The signature for the addCallback() method is as follows:
addCallback(function_name:String, closure:Function):void

The function_name parameter is the name by which you call the Flex function from your HTML page's scripts. The closure parameter is the local name of the function that you want to call. This parameter can be a method on the application or an object instance.

The following example declares the myFunc() function to be callable by the wrapper:

<?xml version="1.0"?>
<!-- wrapper/AddCallbackExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script>
     import flash.external.*;

     public function initApp():void {
        ExternalInterface.addCallback("myFlexFunction",myFunc);
     }  

     public function myFunc(s:String):void {
        l1.text = s;
     }
  
  </mx:Script>
  
  <mx:Label id="l1"/>
  
</mx:Application>

To call the Flex function from the HTML page, you get a reference to the movie object. This is the same value as the id and name properties of the <object> and <embed> tags. In this case, it is mySwf. You then call the method on that object, passing whatever parameters you want, as the following example shows:

<html><head>
<title>wrapper/AddCallbackWrapper.html</title>
</head>
<body scroll='no'>

<SCRIPT LANGUAGE="JavaScript">
    function callApp() {
        window.document.title = document.getElementById("newTitle").value;
        mySwf.myFlexFunction(window.document.title);
    }
</SCRIPT>

<h1>AddCallback Wrapper</h1>

<form id="f1">
    Enter a new title: <input type="text" size="30" id="newTitle" onchange="callApp()"> 
</form>

<table width='100%' height='100%' cellspacing='0' cellpadding='0'>
    <tr>
        <td valign='top'>
            <object id='mySwf' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' height='200' width='400'>
                <param name='src' value='AddCallbackExample.swf'/>
                <param name='flashVars' value=''/>
                <embed name='mySwf' src='AddCallbackExample.swf' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' height='100%' width='100%' flashVars=''/>
            </object>
        </td>
    </tr>
</table>

</body></html>

The default value of the id and name properties in the wrapper that is generated by Flex Data Services is mxml_filename.mxml.swf. The name that you use to access the Flex application in your HTML page's script cannot contain any periods, so you must change the default values in the wrapper. For more information, see Editing the Flex application's id and name properties.

If you do not know which browser your users will be using when they request your Flex application, you should make your wrapper's script browser independent. For more information, see Handling multiple browser types.

If there is no function with the appropriate name in the Flex application or that function hasn't been made callable, the browser throws a JavaScript error.

Flex and Flash Player have strict security in place to prevent cross-site scripting. By default, Flex functions are not callable by HTML scripts. You must explicitly identify them as callable. You also cannot call a Flex function from an HTML page if the HTML page is not in the same domain as the application. However, it is possible to expand the sources from which Flex functions are called. For more information, see About the addCallback() method.

Accessing Flex from JavaScript

Subtopics