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.

externalapi1.jpg

Advertisements

24 Responses to Calling Javascript function from Flex Application

  1. bundagan says:

    Hi Vijay,

    I’ve been unable to do any kind of javascript calls from flex, been trying all methods possible, like navigateToURL, and now ExternalInterface.call, i copied your code excatly, but nothing happens when i click on “Call Javascript Function”

    Is anybody else having the same problem, i’m running firefox 1.5.0.4 on winxp.
    I’m wondering if its local to my build environment, maybe could you send me the swf you built so i could run it here?

    thanks,

  2. I will be forwarding the zip codes to your email account. Please check the code and see wheather you had done it correctly. One thing you should note about writing javascript code in html. This part is very necessary. Also I tested my application by placing application within webserver. Even it work separately I just tested.

  3. bundagan says:

    Hi Vijay,

    thanks for sending me the files, i tested them and i got it to work by running a webserver and accessing the page via the server. It seems that flash9 prefers to be hosted on a webserver when using the ExternalInterface call method with javascript. This was the case on both my winxp machines.

    Thanks again for the help!

  4. Pedro says:

    Hi Vijay,

    I’m trying to communicate both ways, JS to AS and AS to JS. I’ve succedded the AS to JS as you have instructed above but I cannot get the JS to AS working.
    I’ve seen the livedocs and its possible both ways.

    Do you know how to do this?
    Thanks

  5. Pedro thanks for inspiring me to do more research on ExternalInterface implemenation. I had successfully Implemented a javascript flex communcation. Also posted new blog for the same you can have a look into it. I will be Forwarding you the code I worked on, take a look and let me know if it works for you or not.Visit new blog entry “ExternalInterface to Make your flex methods Callable via HTML” for the same

  6. Zeeshan Malik says:

    Hi Vijay,

    I tried the above code in the flex builder 2. It worked fine. But when I deployed the website i.e. copied it on desktop for the flex builder project folder it raised the security sandbox error.

    I even changed the values all the occurrences of allowScriptAccess in the html container, which flex builder generated, to “always”, but it still didn’t work. Could you please tell me how to make it work outside flex builder.

    Thanks.

  7. please make sure you have the correct url. eg. http://yahoo.com and http://www.yahoo.com is not same for the flash/flex application and in that case it gives you the security sandbox error.

  8. Ved says:

    Thank you so much!

  9. Meenu says:

    Hi Vijay,
    Can you pls send me the code? I tried the code published above but could not succeed.
    Thanks in advance

  10. Dobric says:

    Can you send me the code please?
    Thank!

  11. dhana says:

    please send me the code for Calling Javascript function from Flex Application

  12. siva krishna says:

    please send the code

  13. Vivek says:

    Hello sir

    I have Used ur codes but u know what i tried a lot to run the App , but the thing was not working .

    Sir kindly help me out .

    Thanks

  14. Vijay says:

    Hi Vijay,

    I’ve been unable to do any kind of javascript calls from flex, been trying all methods possible, like navigateToURL, and now ExternalInterface.call, i copied your code excatly, but nothing happens when i click on “Call Javascript Function”

    Is anybody else having the same problem, i’m running firefox 1.5.0.4 on winxp.
    I’m wondering if its local to my build environment, maybe could you send me the swf you built so i could run it here?

    thanks,
    Ranadheer Singh

  15. ranadheer says:

    Hi Vijay,

    thanks,
    Ranadheer Singh

  16. ranadheer says:

    Hi Vijay,

    i am new to flex please send me one sample applications with path(If any)
    thanks,
    Ranadheer Singh

  17. Manish gupta says:

    hi Vijay
    [Bindable]
    private var embedurl:String = ExternalInterface.call(“function (){ return window.location.toString()}”) as String;// { return new String(location.href).toString(); }’) as String;//=”temp”;{ return window.location.toString();}

    this is variable that variable value i want to show in Alert.show(embedurl);
    at some event.
    but there is some problem that if i run the application if Mozilla Firefox run sucssesfully.
    but if the same code in Internet Exploror show problem is—— operation aborted.
    can you help me for this prob.
    Thanks & Regards
    Manish Gupta

  18. Gaspar says:

    Could you send me the code? I can’t send and recive values from any javascript function, but i can call it.

    thanks
    Gaspar

  19. Satyajit says:

    hi vijay,

    i am new to flex 2.0. so plz can u send me some sample application source code. and code
    of the above example.

    thanks .

  20. jc says:

    I’m sending a string but the javascript function is not getting it, it gets “undefined”, any ideas?

  21. jc says:

    nevermind I found it. hehe. sorry for the bandwith waste.

  22. Alpesh says:

    Hallo Vijay,

    I’m trying to communicate in bidirectional way, from JS to AS and from AS to JS.
    Since I am reffering adobe’s flex document site, I am not getting it properly.
    Can you help me to get solve this problem?
    Thanx in Adavace…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: