Inject JavaScript code in html wrapper from Flex/ActionScript
Problem
There are times when you want to have some javascript code and function in html wrapper. We have been doing that by having manually putting javascript in html-wrapper (template or file). What if we could inject javascript into html-wrapper from our application?
Solution
I wrote a class "JavaScript" long time back, this class can be used as MXML component as well as directly in pure ActionScript applications.
Detailed explanation
I know subject line is confusing but I am not able to think a better one.
I have written a Adobe Flex component(JavaScript.as), which can be used as MXML tag in Flex applications. You can write JavaScript code as text of this MXML tag.
When your application loads, all that JavaScript code would be exported to HTML container's context.
Confused?
Let code speak rather than me.
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 ()
{
//Invoke the javascript function that we injected using
JavaScript MXML component above
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>
JavaScript Class
package com.abdulqabiz.utils
{
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.net.*;
import mx.core.IMXMLObject;
[DefaultProperty("source")]
public class JavaScript extends EventDispatcher implements
IMXMLObject
{
private var _source:String;
private var _initialized:Boolean;
public function JavaScript()
{
}
public function set source(value:String):void
{
if (value != null)
{
_source = value;
var commentPattern:RegExp =
/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|((^|[^:\/])(\/\/.*))/g;
//TBD:: replace all single quotes with double quotes -
Needs to come up with better
//regexp to keep single quotes within text as it is and
only replace the one used in statements.
//_source = _source.replace(/(\')/g,'\"');
//remove all comments in js code
value = value.replace (commentPattern, "");
//trace (_source);
var u:URLRequest = new URLRequest ("javascript:eval('" +
value + "');");
navigateToURL(u,"_self");
}
}
public function initialized(document:Object, id:String):void
{
_initialized = true;
}
override public function toString ():String
{
return _source;
}
}
}
Note: This solution was published on June 16th, 2006 over here on my blog
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
