Tag Archives: injection

Loading JavaScript file(s) using HTTPService/URLLoader

In my last post, I talked about JavaScript Flex 2 component that can inject Javascript code in HTML wrapper’s context. I experimented to see, if we can load Javascript files (.js) using HTTPService (or flash.net.URLLoader) in Flex2/AS3 projects and inject it.

Example Flex 2.0 code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="com.abdulqabiz.utils.*"  width="100%" height="100%" creationComplete="onAppInit ()">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import mx.events.*;
import mx.rpc.events.*;
import mx.rpc.http.HTTPService;
import com.abdulqabiz.utils.JavaScript;
private var javascript:JavaScript;
private var service:HTTPService;
private function onAppInit ():void
{
service = new HTTPService ();
service.url = "test.js";
service.useProxy = false;
service.resultFormat = "text";
service.addEventListener ("result", injectJavaScript);
service.send ();
}
private function injectJavaScript (event:ResultEvent):void
{
javascript = new JavaScript ();
javascript.source = String(event.result);
trace ("javascript injected: " + event.result);
}
private function invokeSayHelloWorld ():void
{
ExternalInterface.call ("sayHelloWorld");
}
private function invokeSaySomething (str:String):void
{
ExternalInterface.call ("saySomething", str);
}
]]>
</mx:Script>
<mx:Button label="invoke javascript saySomething () function" click="invokeSaySomething ('Hey, how are you?')"/>
<mx:Button label="invoke javascript sayHelloWorld () function" click="invokeSayHelloWorld ()"/>
</mx:Application>

Test.js used in example:

//test.js
var myName = "Abdul Qabiz";
function saySomething (str)
{
alert (str);
}
function sayHelloWorld ()
{
alert ("Hello World!");
}

You would need JavaScript.as (with proper package directory structure) and test.js (code posted above) in place to make above example to work.
I am thinking to load FABridge using this approach. I know, it’s practically of no use except keeping code and logic at one place.

JavaScript injection through ActionScript

In last post, I showed, how can we inject JavaScript using ActionScript or MXML into host HTML container/page.

One more use-cases, I can think of:

  • Request server-side script to send a JavaScript (for specific browser) as string.  Using JavaScript class, I can inject the javascript in HTML

Flex Component that injects Javascript in HTML host

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):-


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.abdulqabiz.utils.*"  width="100%" height="100%">
<JavaScript>
<![CDATA[
var myName = "Abdul Qabiz";
function saySomething (str)
{
alert (str);
}
function sayHelloWorld ()
{
alert ("Hello World!");
}
]]>
</JavaScript>
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
private function invokeSayHelloWorld ()
{
ExternalInterface.call ("sayHelloWorld");
}
]]>
</mx:Script>
<mx:Button label="invoke javascript sayHelloWorld () function" click="invokeSayHelloWorld ()"/>
</mx:Application>

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


<html>
<head>
<!-- swfobject -->
<script type="text/javascript" src="http://blog.deconcept.com/swfobject/swfobject_source.js"></script>
</head>
<body>
<div id="flashcontent" class="playerContent" >You don't have Flash Player 9.</div>
<script type="text/javascript">
var swfObj = new SWFObject ("JavaScriptComponentTest.swf","JavaScriptComponentTest", "300", "300", "9", "#C0D4DD", true);
swfObj.write("flashcontent");
</script>
<a href="javascript:void(0)" onclick="saySomething ('hey')" >invoke saySomething ()</a><br />
<a href="javascript:void(0)" onclick="sayHelloWorld ()" >invoke sayHelloWorld ()</a><br />
<a href="javascript:void(0)" onclick="alert (myName);">show myName </a><br />
</body>
</html>

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.