Search

 

February 2008
S M T W T F S
« Jan   Mar »
 12
3456789
10111213141516
17181920212223
242526272829  

Tags

Archives


« | Main | »

AIR ActionScript / JavaScript Bridge

By Rich Tretola | February 25, 2008
31,425 views

Bridging between JavaScript and ActionScript is very easy with AIR. The following example will show how to call JavaScript functions from ActionScript and vice-versa. Special thanks to Oliver Merk of New Toronto Group for his contributions towards this example when it was an Apollo sample.

The MXML file defines a handler function for the call from JavaScript and then initializes the function when the DOM_INITIALIZE Event is fired. It’s function simply launches an ActionScript Alert. The doHTMLAlert() function calls the JavaScript function that is located within the loaded html file by scoping it as follows:

1
html.htmlLoader.window.calledFromAS();

html is the id of the HTML control, htmlControl is the control automatically embedded within mx:HTML and window is the reference to the loaded content. calledFromAS() is defined in the htmlwithJS.html file shown below. Finally htmlwithJS.html also demonstrated a normal JavaScript alert called from itself.

MXML file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" creationComplete="init()">
    <mx:Script>
    <![CDATA[
        private var calledFromJSHandlerFunction:Function = calledFromJSHandler;
        private function init():void{
            html.addEventListener(Event.HTML_DOM_INITIALIZE, domInitialized);
            html.location = "htmlwithJS.html";
        }
        private function domInitialized(event:Event):void{
            html.htmlLoader.window.calledFromJSHandlerFunction = calledFromJSHandlerFunction;
        }
        private function calledFromJSHandler():void {
            mx.controls.Alert.show("ActionScript called from JavaScript", "Alert");
        }
        private function doHTMLAlert( ):void {
            html.htmlLoader.window.calledFromAS();
        }
    ]]>
    </mx:Script>
    <mx:Button id="alertBtn" label="Call JavaScript from ActionScript"
        click="doHTMLAlert()" x="137" y="10"/>
    <mx:HTML id="html" x="137" y="40" width="339"/>
    <mx:Label x="10" y="12" text="Normal MXML Button"/>
    <mx:Label x="28" y="38" text="HTML component"/>
</mx:WindowedApplication>

htmlwithJS.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <script language="Javascript">
        function calledFromAS() {
            alert('Hello from ActionScript');
        }
        </script>
    <body>
        <input type="button"
            value="Call ActionScript from JavaScript"
            onclick="calledFromJSHandlerFunction()" />
        <br />
        <input type="button"
            value="Normal JavaScriptAlert"
            onclick="alert('Hello from JavaScript')">
    </body>
</html>

JavaScript alert called from ActionScript:

asjs1.jpg

ActionScript Alert called from JavaScript

asjs2.jpg

Topics: Adobe AIR | 18 Comments »

18 Responses to “AIR ActionScript / JavaScript Bridge”

  1. jagdish Says:
    August 7th, 2008 at 1:43 am

    nice one.. but can u plz help me in finding client ip address using flex3 and javascript????
    very urgent………………
    thanx in advance

    Reply to this comment

  2. vighnesh Says:
    November 8th, 2008 at 12:53 am

    Please Provide Source File I am not able to call action script function Alert.Show from javascript.

    Reply to this comment

  3. Justin Bishop Says:
    March 30th, 2009 at 2:20 pm

    this example rocks. simple, straightforward, shows the mechanics, and works. thanks a lot.

    Reply to this comment

  4. abhilash Says:
    April 22nd, 2009 at 4:35 am

    Is there any way to invoke javascript function from flex with out using HTML component. Important please help..

    Reply to this comment

    David Maggard Reply:

    in a regular Flex app use ExternalInterface to call JS in the containing page

    Reply to this comment

  5. Josh Millstein Says:
    May 2nd, 2009 at 2:21 pm

    Thank you very much for your example. Very helpful. I have one more requirement that is kinda in-line with your example. I’m trying to interface with Microsoft Live Maps and in my html file that I’m using ( my version of htmlWithJS.html ) I have the following line.

    So I’m using javascript stuff from another domain which I’m assuming needs to be loaded to be accessible, when I try and run my program it says that it ‘can’t find variable VEMap’ VEMap is a function that would be loaded and accesible by the above script reference to microsoft. Can I not do this? Does all my javascript have to reside in the html file. Any help would be awesome. Thanks in advance for you time.

    Josh

    Reply to this comment

  6. Josh Millstein Says:
    May 2nd, 2009 at 2:24 pm

    This line was cut from my previous post. It is the line where I’m including javascript api from microsoft live.

    [script language="Javascript" src="http:--dev.virtualearth.net-mapcontrol-mapcontrol.ashx?v=6.2"][script]

    It looks wrong cause I cut out any forward slashes and greater than less than signs

    Reply to this comment

  7. Ben Says:
    July 4th, 2009 at 3:36 am

    Thanks a lot for posting this example. I have been looking for a way to incorporate JQuery into my air apps and I think this method will be perfect for that.

    Reply to this comment

  8. Vijju Says:
    July 8th, 2009 at 6:29 am

    This is very useful content. It helped me to explore the power of AIR.

    Thanks…..

    Reply to this comment

  9. Yinan Says:
    August 16th, 2009 at 11:30 am

    html.location = “htmlwithJS.html”;

    the location property is read-only, method load should be used instead.

    Reply to this comment

  10. dimitri Says:
    August 27th, 2009 at 8:45 pm

    Thank you so much for this post!!

    Reply to this comment

  11. Magda Says:
    November 3rd, 2009 at 9:54 am

    Hi everyone,
    I tried this solution but it works only with simple JS functions. However, if we replace ALERT() with WINDOWS.OPEN() it doesn’t work. Can you tell me why?
    Any advice and links are appreciated.
    Thank you

    Reply to this comment

  12. Patrick Says:
    December 1st, 2009 at 7:09 pm

    Interesting, this works great for me.

    Reply to this comment

  13. PJ Says:
    December 7th, 2009 at 9:38 am

    Exellent example – thank you! Suited my purpose perfectly.

    Reply to this comment

  14. Naveen Says:
    January 7th, 2010 at 3:53 am

    Hey! Very well written example which really helped us in a huge way to get an RTE editor working in adobe air environment.
    Thanks a ton.

    Reply to this comment

  15. daniel Says:
    February 5th, 2010 at 8:32 am

    Thanks a lot!!! That saved my day :)

    Reply to this comment

  16. Nath Says:
    February 10th, 2010 at 3:57 am

    Hi I have one Question..

    The jsp page is inside Air Application So now my jsp page can communicate with Java?

    Reply to this comment

  17. Alex Says:
    March 21st, 2010 at 9:15 pm

    how do i make this work from flash to javascript. there is no import flash.html (air and flex i think) in flash.

    ExternalInterface not working with AIR(html).

    Can someone help?

    Reply to this comment

Comments