ExternalInterface from JavaScript to IE/Firefox

ExternalInterface communication with JavaScript

The most simple way to describe the case is as if you have the ExternalInterface addCallback in the Flex application like that:

flex.mxml

ExternalInterface.addCallback("jsFunc", flexFunc);

public flexFunc() : void
{ ... }

and in the javascript code you’ve something like that:

file.js

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

getSwf('movie').jsFunc();

that will execute the flexFunc in the flex app.

Important!

is very important to have the object/embed tag correct:

<object classid="clsid:d27cdb6 ....
<param name="name" value="movie" />
<param name="allowFullScreen" value="true" />
<param name="AllowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="flashVars" />
<param name="src" value="movie.swf" />
<embed ... name="movie"></embed>
</object>

That doesn’t work? Where’s the bug?

Even it’s not so clear the bug is present. The getSwf function gets the window[moviename], or document[moviename] depending of which browser is used. But the problem is that both object and embed tags have same name and the selected object is not one but two.

So there’s a simple patch

Name the object embed tags with different names, i.e.

<object classid="clsid:d27cdb6e-ae6d-11 ...>
<param name="name" value="movieie" />
<param name="allowFullScreen" value="true" />
<param name="AllowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="flashVars" />
<param name="src" value="movie.swf" />
<embed ... name="movieie"></embed>
</object>

now they are named movieie (for IE) and movieff (for Firefox) and we must to change a bit the getSwf function like that:

function getSwf(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName + 'ie'];
    } else{
         return document[movieName + 'ff'];
    }
}

getSwf('movie').jsFunc();

CodeProject

Related posts:

1. Flex Javascript communcation example
2. Tips and tricks in ExternalInterface communication!
3. Passing objects with ExternalInterface from JS to Flex

You are a GREAT developer? Click here to answer the weekly quiz!