In a previous example, “Calling JavaScript functions from your Flex applications using the ExternalInterface API”, we saw how you could call JavaScript methods from our Flex applications using the static ExternalInterface.call() method.
The following example shows you how you can call ActionScript methods in our Flex applications from JavaScript using the static ExternalInterface.addCallback() method and a bit of JavaScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/11/calling-actionscript-functions-from-your-html-templates-using-the-externalinterface-api/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var alert:Alert;
private function init():void {
ExternalInterface.addCallback("alert", showAlert);
}
private function showAlert(msg:String):void {
var now:Date = new Date();
alert = Alert.show(msg,now.toLocaleDateString());
alert.status = now.toLocaleTimeString();
}
]]>
</mx:Script>
</mx:Application>
/src/externalInterface.js
/** http://blog.flexexamples.com/2008/03/11/calling-actionscript-functions-from-your-html-templates-using-the-externalinterface-api/ */
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function asAlert(value) {
thisMovie("main").alert(value);
}
/html-template/index.template.html
<head>
. . .
<script language="JavaScript" src="externalInterface.js"></script>
</head>
<body>
. . .
<div align="center"><h1><HTML /></h1></div>
<div align="center"><input type="Button" value="Show Flex Alert" onClick="asAlert('Hello World, from JavaScript');" /></div>
</body>
View source is enabled in the following example.
{ 6 comments… read them below or add one }
When I compiled your example and made my own HTML page it wasn’t working for me, so I figured it must be a difference in how you embed the swf. So I downloaded your exact main.html, externalInterface.js and AC_OETags.js files, and then it worked for me in IE6 but not firefox. So that drove me batty for a while. But I finally figured out that it was because I was running it from my desktop. Running it from my apache server it works in both. Thanks for your help! I appreciate it a lot, and just in case anyone else runs into the same problems, it looks like you have to be running from a server to get it to work consistently.
i’m using it to save a base64 encoded image. i’m wondering, can you load a base64 image in flex?
i found the answer to loading a base64 image: http://code.google.com/p/flexlib/
I download your source code and try to run it on my Flex Bulider , it doesn’t work. I don’t know what’s why, is it my Flex Bulider problem?
Useful little snippet!
Thanks for making the effort to systematize so many samples!
Hi Peter,
have you tried to use your example with AJAX?
I experience following problem:
- I am loading the content (object/embed definition) via a script with AJAX
- I am then pasting the result with JQuery’s function html() into an element in the HTML DOM
- What happens now, is that I can call JS from AS, but every call from JS to AS results in an error that the object doesn’t support this method or attribute (this happens only in IE browsers 6,7,8. Firefox works).
Do you have an idea how to solve this problem?