Flex Mobile: Invoking JavaScript in a StageWebView

The StageWebView allows you to render HTML content inside a Flex application using the underlying HTML rendering engine available on your mobile device.

In some situations, the Flex application may need to communicate with the HTML document hosted in the StageWebWiew. In other words, you may need to invoke a JavaScript function available in that document from the Flex application.

The basic approach is to use the StageWebView loadURL() function with the javascript: protocol as follows:

stageWebView.loadURL("javascript:myFunction()");

For example, if you need to invoke the addItem() function providing the firstName and lastName values captured in the Flex application, you’d do something like this:

stageWebView.loadURL("javascript:addItem('" +
        firstName.text + "', '" + lastName.text + "')");

iOS Technique

On iOS however, you can’t currently use the javascript: protocol to invoke a function using loadURL() as described above. What you can do is use the javascript: protocol to change the location of the document. So the trick is to just change the hashtag at the end of the URL as a “signal” to tell the page you want to execute an action (if the base URL doesn’t change, the page is not reloaded). You can come up with your own hashtag format convention to specify the method to invoke and parameters to pass. In this case, since I only have one method to invoke, I just use the hashtag to pass the values (first name and last name).

counter++;
webView.loadURL("javascript:window.location='http://foo.com/bar.html" +
        "#" + firstName.text +
        "&" + lastName.text +
        "&" + counter + "'");

NOTE: The incremented counter is used to ensure that the hashtag is changing on consecutive method invocations even if the first name and last name are the same (otherwise the onhashtag event would not fire).

In the HTML page, we use the onhashchange event to listen for hashtag changes and then trigger the appropriate action. My JavaScript looks as follows:

function addItem(firstName, lastName) {
	var list = document.getElementById('list');
	var li = document.createElement('li');
	li.appendChild(document.createTextNode(firstName + " " + lastName));
	list.appendChild(li);
}

window.onhashchange = function() {
	var newHash = window.location.hash.substring(1);
	var a = newHash.split("&");
	addItem(a[0], a[1]);
};

Final Note

The Flash Builder simulator does not support the onhashchange event. So to test my application in the simulator (and to use the default approach when not on iOS), I use the following code:

if (Capabilities.os.indexOf("iPhone OS") == -1)
{
	webView.loadURL("javascript:addItem('" +
		firstName.text + "', '" + lastName.text + "')");
}
else
{
	counter++;
	webView.loadURL("javascript:window.location='" + url +
		"#" + firstName.text +
		"&" + lastName.text +
		"&" + counter + "'");
}

You can download the Flex project here: http://coenraets.org/webview/StageWebViewJavaScriptDemo.fxp

The HTML and JavaScript files are here:

27 Responses to Flex Mobile: Invoking JavaScript in a StageWebView

  1. Ben Clinkinbeard July 27, 2011 at 10:47 am #

    I’ve been using the javascript:someFunction() syntax on iOS without issue.

  2. Ganesh July 28, 2011 at 5:21 am #

    my flash builder 4.5 does not show option for mobile platform for ios and blackberry it just show option for android
    current i am using flash builder 4.5
    flex sdk updates to 4.5.1
    stiill its not working
    check inage on=http://forums.adobe.com/thread/883052

  3. Wouter Coekaerts July 28, 2011 at 6:21 am #

    When passing parameters like that in a string, you also escape special characters.
    If someone’s name contains a quote (‘) character, this will break.

    In this example that is a relatively harmless bug. If your parameters come from an untrusted source, then you have created a cross-site-scripting vulnerability.

  4. amlan July 29, 2011 at 3:52 am #

    Thanks for the great example but can you show a demo of how to do the same thing with a local javascript/html file( containing the javascript) file (in the assets folder of the project).

    Thanks in advance

    • iPad Lessons February 13, 2012 at 1:13 am #

      I would like a demo of this too Christophe. Please make a demo.

  5. Maikel Sibbald August 4, 2011 at 7:20 am #

    HAve you experienced any problems when you execute 2 (or more) after each other in iOS? Cause when I’m doing this the javascript is call twice, but the parameters have the value of the parameters you passed a long with the last method call.

    So for example:
    first call:
    firstname: Maikel
    lastname: Sibbald

    second call:
    firstname: Christophe
    lastname: Coenraets

    I receive in the javascript twice Christophe Coenraets.
    It’s working for me when I setTimeout of 2 sec. But that’s not a option for me.. isn’t there some event or call back option to tell actionscript its ready for another call..

    thanks,

    Maik

    btw. good article!

  6. Apinan August 23, 2011 at 11:24 pm #

    The call can be made but anybody knows how can we get the return value from javascript function?
    Thanks

  7. Xperiments August 24, 2011 at 3:46 am #

    Hi, you can use the stagewebviewbridge class to do this sort of communication. http://code.google.com/p/stagewebviewbridge/

    by nos the only problem is that it don’t work in android, but i am finishing the modifications to do it …

  8. Mamta September 19, 2011 at 5:39 am #

    I am using stageWebView for showing webpage in my mobile app but don’t know how to move back to my app once it gets loaded. In application descriptor file, I had already registered custom uri scheme (myapp://) for IOS devices and from the loaded page inside stageWebView, I was trying to call following URL myapp://webcam. But nothing had happened. It neither called LOCATION_CHANGE event of StageWebView not called INVOKE_EVENT of nativeapplication.

    How can I fix this issue?

    Thanks in advance,
    Mamta

  9. مفكرة العرب October 3, 2011 at 6:23 pm #

    Thanks, this blog is very good!!

  10. xperiments October 9, 2011 at 11:10 am #

    Hi,

    I have update the StageWebViewBridge class to work with android and some other improvements…

    http://code.google.com/p/stagewebviewbridge/

    StageWebViewBridge is an extended version of flash.media.StageWebView.

    Extends Bitmap class, you can modify his x,y,alpha,rotation,visible, etc ( Version 1 Beta )
    Communicates Actionscript with Javascript.
    Communicates Javascript with Actionscript.
    Load local files and resources in a easy way.
    Extends loadString method with AS3 – JS communication.
    Extends loadString method to load local resources.
    Lets you take an SnapShot to use as the bitmapData of the bitmap.

  11. sunil October 24, 2011 at 11:36 pm #

    I am trying to run Flex mobile app using StageWebView in android emulator. I have installed AIR3.0 and FlashPlayer 10.1 in the emulator. When i run the apk, android emulator asks for FlashPlayer to be installed. Why is it so when the Flash Player is already available? Any clues..

  12. Raja May 17, 2012 at 9:03 am #

    Hi,

    Im using StageWebView to display a webpage on my Android Application…..Can any one please help me , how to change the Default WHITE Background color of the StageWebView….

    Thanks,
    Rajkumar

  13. Raja May 29, 2012 at 8:40 am #

    Hi, Can any one please help me how to change the stagewebview background colour from default white…also is it possible to get Swipe Event on StageWebview?

  14. Matteo Legittimo July 24, 2012 at 11:11 am #

    Really nice!
    What if i have to do the opposite?
    Call a function in my html page to comunicate with my application?

    Thanks!

  15. mfkrh-ar.com October 4, 2012 at 8:00 pm #

    [...] JQuery in a Flex Application This is a follow up to my previous post on how to invoke a JavaScript function in an HTML document hosted in a Flex application (using the [...]

  16. Tahir Alvi January 7, 2013 at 6:34 am #

    Good example, Thanks Coenraets.

  17. Tahir Alvi January 7, 2013 at 6:38 am #

    Thank you for the code.

  18. Tierce February 1, 2013 at 1:00 pm #

    Hi Christophe,
    do you know if the last vesrion of the Flash Builder (4.7 Premium) support the onhashchange event ? I’m running into trouble with some javascript usage in my mobile application…
    Sonia

  19. Siva February 7, 2013 at 10:47 am #

    Hi Christophe,

    i am able to call a js function from flex through StageWebView.loadURL(). Likewise is it possible to call or callback flex function from .js?

    Thanks.

  20. Harsh Vardhan February 13, 2013 at 10:56 am #

    Hi, thanks for the guiding us out, really helpful.
    Anyways I was enjoying calling function from flex to JavaScript and vice verse, until I have to pass whole XML as string to JavaScript. When I tried it, it just did not. I don’t know if there is any limit or if there is, how much it is.

    Have anyone of you had seen this problem? Any clue would be helpful.

  21. Andrew Orwill August 21, 2013 at 12:11 pm #

    Hi Christophe,

    I am developing reader application in flex 4.6. I am using StageWebview to display my content.I want change the stagewebview fontsize when the user click my customized zoom button. How can i do this..

Trackbacks/Pingbacks

  1. Notes to myself | Axelology - July 27, 2011

    [...] Notes to myself Posted in July 27th, 2011 by admin in Flex http://coenraets.org/blog/2011/07/flex-mobile-invoking-javascript-in-a-stagewebview/ [...]

  2. WebView - Flashforum - August 4, 2011

    [...] [...]

  3. Using JQuery in a Flex Application | iPad Lessons - August 8, 2011

    [...] JQuery in a Flex Application This is a follow up to my previous post on how to invoke a JavaScript function in an HTML document hosted in a Flex application (using the [...]

  4. Using jQuery in a Flex Application - January 5, 2012

    [...] is a follow up to my previous post on how to invoke a JavaScript function in an HTML document hosted in a Flex application (using the [...]

  5. Using jQuery in a Flex Application | TechnoVeille - September 3, 2012

    [...] is a follow up to my previous post on how to invoke a JavaScript function in an HTML document hosted in a Flex application (using the [...]

Leave a Reply

css.php