ExternalInterface: Flex + Javascript Get Downright Cozy

Javascript Calling Flex

In order to expose the functionality of your Flex app to outside forces, you need to register any outward-facing functions with the ExternalInterface by giving them an outward-facing name:

e.g.

if (ExternalInterface.available) {

// This makes a function called "populateCookieContextValues" available to the browser.

ExternalInterface.addCallback("populateCookieContextValues",

                function ():void {

                  // This function would do something.

                }

           );

 

ExternalInterface.addCallback("returnAllTasksToGroupQueueOnClose", myFunction);

private function myFunction (parameter:String):void {

                // This function would do something else.

}

} else {

trace("Houston, we have a problem.");

}

Inside your wrapper, you must give a name to the embedded SWF within the <embed/> tags, and using that name (here we'll call it "main"), you can get a handle on the SWF through Javascript. (If I'm not mistaken, by deafult, that's the name used by FlexBuilder when it generates the HTML wrapper for a new project.)

Note that for IE and a Mozilla browser, the location of the SWF in the document object model (DOM) is slightly different. In IE it can be found in the window, in Firefox et al. it is in the document.

e.g.

function callPopulateCookieContextValues() {

    // If we are using IE
    if (navigator.appName.indexOf("Microsoft") != -1) {
        window["main"].populateCookieContextValues;

    // Otherwise we are using Firefox or equivalent
    } else {
        document["main"].populateCookieContextValues;
    }
}

 

Calling functions in the HTML wrapper from Flex (Flex to Javascript):

To call Javascript functions from inside of Flex, you need to first have a function in the wrapper (or imported/included in the wrapper) which you will then use the ExternalInterface.call() function to invoke. This function can take a variable number of parameters (i.e. 0...n).

e.g.

if (ExternalInterface.available) {

try {

// Invoke the get_cookie function, feeding it the "someParameter" String.

           var returnedString:String = ExternalInterface.call("get_cookie", "someParameter"));

} catch (e:Error) {

// A problem occurred making the call

            trace("Houston, we have a problem.");

      }

} else {

// No external interface available

trace("Houston, we have a problem.");

}

Another (Cool) Way To Call Javascript

One clever thing that you can do through the ExternalInterface is to use the "eval()" Javascript function to run an expression that you've written inside your Flex application. This gives you the freedom to write basic Javascript expressions right in your Flex application and have them run inside the HTML wrapper.

e.g.

if (ExternalInterface.available) {

// Close the browser window

ExternalInterface.call("eval", "window.close();");

} else {

// No external interface available

trace("Houston, we have a problem.");

}

It is good practice to check if the ExternalInterface is available before making calls to it. Also, you'll want to put your calls into try/catch blocks, so that you can detect and gracefully handle failures. You must remember that when dealing with all of the different browsers out there, you never know when perfectly good Javascript is going to suddenly fail on you.

One Last Thing

Finally, it seems self-evident but I'll still mention that because the ExternalInterface is a bridge between your SWF and the HTML wrapper (and hence the browser), it follows that Air doesn't support the ExternalInterface class, since it doesn't run inside of a browser.

Hopefully this brief overview will help somebody out there make use of this powerful tool. The ExternalInterface opens up a door to so many possibilities that I haven't mentioned or even though of, so I invite you to post links to cool uses you've made of the ExternalInterface in your own projects.

Thank you!