Call Javascript function from Flex / Flash Builder (AS3)
Line Break
Author: Roelof (13 Articles) - Author Website
Roelof is a SAP Consultant specialized in Front-End development. In his spare free time he is either developing on the web, playing basketball, watching soccer or traveling. He is also the co-owner of Flex-Blog.com.
This are actually two examples in one. First I will show how to call a Javascript function from your Flex Application. The second example will be a direct execution of Javascript code from your AS3.
Calling Javascript can be done easily using the ExternalInterface class. I have used this in my Flex Comment Form to refresh the screen after the comment is placed.
What’s possible?
ActionScript -> Javascript (HTML)
- Call any JavaScript function (with any number of arguments, any names and any data types).
- Receive a return value from the Javascript function.
Javascript (HTML) -> Actionscript
- Call any ActionScript function (using the standard function notation).
- Receive a return value from the ActionScript function.
Please note that you cannot use the ExternalInterface using AIR.
Example
I will start of with an example. I have added this Javascript function to the header of the HTML file generated with the release (view source).
1 2 3 4 5 | <script language="javascript"> function myfunction(message) { alert(message); } </script> |
This Javascript function will be called if you press on the button of the Flex component below.
Calling Javascript Function from Flex.
You probably wonder what Actionscript code is behind this. It’s actually very simple. I have created this function, which eventually calls the Javascript function with 1 parameter.
1 2 3 4 5 6 7 8 9 | private function showJavascriptAlert():void { var javascriptFunction:String = "myfunction"; var message:String = message.text; if(ExternalInterface.available) { // call the javascript function! ExternalInterface.call(javascriptFunction, message); } } |
Calling Javascript from Flex (no function).
It is possible to create a Javascript function to call from your Flex Application, but it’s not necessary. Within Actionscript 3.0 it is possible to execute Javascript code directly. Sometimes it’s just overkill to create a complete Javascript function for something easy. Like for example showing an alert. This example is not using a JavaScript function.
Example 2
Here is the example. (use right mouse click -> View Source)
Source Code
1 2 3 4 5 6 7 8 | private function showJavascriptAlert():void { var message:String = message.text; if(ExternalInterface.available) { // call the javascript function! ExternalInterface.call("alert", message); } } |
I did not write an example about calling ActionScript functions from JavaScript. If you would like to see that example leave a comment!
Related posts:
- Easy Unix Time Function
- Connect to Google Analytics from Flash Builder
- Using ASDoc as an External Tool in Flash Builder 4
- TinyURL usage with Flash Builder
- Using States in Flash Builder
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(7 votes, average: 4.43 out of 5)
Loading ...Comments
4 Responses to “Call Javascript function from Flex / Flash Builder (AS3)”
Hi!
Try JSInterface library
http://code.google.com/p/jsinterface/
Using it, you can call JavaScript function with native syntax. For your example function calling will look like:
JSinterface.initialize();
JSInterface.window.myfunction();
It is very useful, if you are expecting high-level integration with JavaScript.
Thanks for this addition!
how to pass multiple arguments
It is helpful, would like to see javascript calling actionscript functions.