While working with ExternalInterface on a recent Flex project it became a little cumbersome accessing the embedded SWF several times.  This is especially true if there is more than one SWF in a given page. Typing document.getElementById gets old fast as well. Therefore, this issue illustrates the need for core or global methods that can be reused, especially if you aren’t using a framework such as Prototype or jQuery.

When a SWF is embedded into a page, it naturally becomes a part of window.document/document/window (Internet Explorer).

The document is contained by the window object and may contain any number of elements.

Because of this, it is rather simple to access a SWF to pass a method into a Flex app.  The idea is simply to check whether or not the browser is IE (in this example we will use a UA check), then return the element with the appropriate SWF name:

function getSWFApp(appName) {
	if (navigator.appName.indexOf ("Microsoft") !=-1) return window[appName];
	else return document[appName];
}

Of course, there is more than one way to skin a cat. In this case, a more traditional approach:

function getSWFApp(appName) {
	return document.getElementById(appName);
}

Elsewhere in your code you can then pass a method to the SWF using dot syntax just as you would by using document.getElementById:

getSWFApp("ExampleApp").exampleEventName(exampleEventParams);

As an alternative to document.getElementById, returning the object from the document works like a charm. More importantly, a global method to retrieve a SWF saves many keystrokes. As an added bonus, this method can easily be added to the Flex HTML wrapper, thus allowing quick and easy deployment of applications using ExternalInterface.

Tags: Ajax/DHTML, Flash, Flex
Posted in Flash | View blog reactions