Calling Javascript function from Flex Application

There are various ways of calling javascript from your flex application ie. navigateToURL, ExtenalInterface. ExternalInterface is most elegent and simple way of calling javascript from flex application.

ExternalInterface API has also support browser checks. ExternalInterface class has static method call(javascriptFunctionName, ArgumentList, …) to which you can specify the method you need to call.

Success of the call method depends on the HTML pages with allowScriptAccess attribute which is within <object> or <embed> tag of HTML and it must be set to “always” or “sameDomain”.

Your typical flex Application with ExternalInterface will look like

ExternalInterfaceApp.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”absolute”>
<mx:Script>
<![CDATA[

import flash.external.*;
import mx.controls.Alert;

public function javascriptAlert():void
{
var javascriptFunction:String = “showAlert”;
var message:String = messageText.text;
if(ExternalInterface.available)
{
ExternalInterface.call(javascriptFunction, message);
}

}
]]>
</mx:Script>
<mx:TextInput x=”10″ y=”20″ text=”Enter Message” id=”messageText”/>
<mx:Button x=”178″ y=”20″ label=”Call Javascript Function” click=”javascriptAlert()”/>

</mx:Application>

ExternalInterface.available property is to identify wheather your flash player supports ExternalInterface API or Not.

Javascript in HTML page

<script language=”javascript”>
function showAlert(message)
{
alert(“message from flex :”+ message );
}
</script>

You need to include this javascript into the HTML page.

In above example browser alert will be get displayed with the message you entered in the input box.