Flex Component that injects Javascript in HTML host

15 Jun 2006

I know subject line is confusing but I am not able to think of a better one.

I have written a Adobe Flex 2.0 component(JavaScript.as), which can be used as MXML tag in Flex 2.0 applications. You can write JavaScript code as text of this MXML tag. When your application loads, all that JavaScript code would be injected host HTML's DOM.

Confused? Let's look at some examples.

Sample MXML application using this component (test.mxml):-

<![CDATA[
var myName = "Abdul Qabiz";
function saySomething (str)
{
alert (str);
}
function sayHelloWorld ()
{
alert ("Hello World!");
}
]]>


<![CDATA[
import flash.external.ExternalInterface;
private function invokeSayHelloWorld ()
{
ExternalInterface.call ("sayHelloWorld");
}
]]>

HTML code that embeds test.swf(output of above code):-

You don't have Flash Player 9.

invoke saySomething ()

invoke sayHelloWorld ()

show myName 

See an example Or Download (zip 133kb includes the SWF).

The code is available under the MIT license.

Disclaimer: I have only tested this in FireFox on Windows. So please drop a comment, if doesn't work in your system.

Update:
March 6, 2007 - Fixed a bug, which popped-up after I implemented comment removal feature. Thanks to Joan for point it out.
March 5, 2007 - Library has been updated, it can now handle comments in JavaScript code. It would basically remove all comments before injecting it in HTML container.