Calling a Flex function from javascript

--------------------------------------------------check---------------------------------- function callApp() { window.document.title = document.getElementById(“newTitle”).value; FinalTouchIE.myFlexKeyHandler(window.document.title); } //---------------------------------------------------End Check------------------------------------ //--------------Here goes getFlexApp------------------------------------------------------------------- function getFlexApp(appName) { if (navigator.appName.indexOf (“Microsoft”) !=-1) { return window[appName]; } else { //alert(“Document “+document[appName]); return document[appName]; } } } Flex code:- - id: 171 author: sajjad mahmood author_email: [email protected] author_url: ‘’ date: ‘2008-06-24 21:35:01 +0530’ date_gmt: ‘2008-06-24 16:05:01 +0530’ content: ‘great.............… ‘ - id: 172 author: atul author_email: [email protected] author_url: ‘’ date: ‘2008-08-25 20:54:40 +0530’ date_gmt: ‘2008-08-25 15:24:40 +0530’ content: ‘i have tried you example but it doesn’‘t work can you some more example which are in working ‘ - id: 173 author: Ramesh author_email: [email protected] author_url: http://Nil date: ‘2008-11-13 14:56:07 +0530’ date_gmt: ‘2008-11-13 09:26:07 +0530’ content: | HI, I know its late, But i wish to know that can we include .js(JAVASCRIPT) file in to mxml flex file like including javascrpit file in html. if s, how? what is the code 4 tat. mail me.…. Regards, Ramesh. - id: 174 author: Mysok author_email: [email protected] author_url: ‘’ date: ‘2008-12-28 20:46:54 +0530’ date_gmt: ‘2008-12-28 15:16:54 +0530’ content: | hi, unfortunately the code doesn’t work with Flex Builder 3, do you (anybody) have some update? Thank you a lot. Mysok - id: 6596 author: Bhavika author_email: [email protected] author_url: ‘’ date: ‘2009-08-24 13:00:09 +0530’ date_gmt: ‘2009-08-24 08:00:09 +0530’ content: “i have 1 html page, from there i am calling a flex function to load swf object!\r\nm able to implement this successful in IE and safari,\r\nbut mozilla says myflexfunction is not a function!\r\n\r\nfunction callApp(formid) {\r\n var objectChart = document.getElementById(\“statisticsChart\”);\r\n objectChart.myFlexFunction(formid, $get(‘’).value);}\r\n\r\nmyFlexFunction is a flex function, statisticchart is a swf object.\r\nany help will be appriciated!\r\nanyidea?” - id: 7269 author: splendidus author_email: [email protected] author_url: http://splendidus.blogspot.com/ date: ‘2009-10-04 21:22:00 +0530’ date_gmt: ‘2009-10-04 15:52:00 +0530’ content: |- \@Bhavika: I had the same problem. In my case it turned out, that the flex-function was invoked before the swf-object was fully loaded. I described the problem and my solution in more detail on my blog: http://splendidus.blogspot.com/ Hope it helps... - id: 7383 author: pinarocal author_email: [email protected] author_url: ‘’ date: ‘2010-04-13 20:15:00 +0530’ date_gmt: ‘2010-04-13 14:45:00 +0530’ content: |- Hi, I have a problem. in my project i have two parts one is related with Javascript files for mozilla add on , the other is flex files which is used for graph visualization. the problem is that i can not manage to ensure interaction btw flex and javascript files. i want flex files take information from javascript file. that is, I want Javascript sent data to flex files. Can anyone help us ? thanx in advance - id: 7384 author: splendidus author_email: ‘’ author_url: http://twitter.com/splendidus date: ‘2010-04-13 20:52:00 +0530’ date_gmt: ‘2010-04-13 15:22:00 +0530’ content: “@pinarocal: The article on \nhttp://splendidus.blogspot.com/search/label/javascript\nshould give you some hints. \nI would declare a variable and a set-function in the flex file. Then call the set-function from the javascript file with the data you want to pass on to flex.\nThe code in the article above works fine, so you only need to add some additional variables and functions to it.\n\nIf that doesn’t work for you, maybe you could post a detailed description of the exact problem?” - id: 7393 author: pinarocal author_email: [email protected] author_url: ‘’ date: ‘2010-04-30 15:19:00 +0530’ date_gmt: ‘2010-04-30 09:49:00 +0530’ content: “nlks, actually we have the same problem. have you found any solution to this? if yes, can you please explain to me?\nthanx in advance “ - id: 7395 author: pinarocal author_email: [email protected] author_url: ‘’ date: ‘2010-05-02 17:45:00 +0530’ date_gmt: ‘2010-05-02 12:15:00 +0530’ content: ‘actually i have managed interaction between flex and javascript. swf file works correctly. Now, there is a project about creating mozilla add-on. when swf file is embeded to this project, it does nothing ! i see swf is loaded but any changes that i make is not displayed correctly. i couldnt understand why it is not working when i combine it to add-on project while it works. i checked the paths, includes and everything ! ‘ ---

Update: I have updated the content of this entry after it was posted. John Dowdell(JD) pointed out some part of post which were confusing. I hope, it is clear now.

This is quite common question in Flash and Flex world. I had created JSFCommunicator library long back to facilitate JavaScript-Flash-JavaScript communication. But JSFC is supported in applications created via Macromedia Flash authoring tool, it is not straight forward to use it in Macromedia Flex applications. JSFC also has some issues in Firefox browser on MacOS. I am going to update it so that it works well on most of the browsers, operating systems and also in Macromedia Flex applications.

In flexcoders list, someone asked how to call a function in Flex app from Javascript, I wrote a simple example to show the technique. Following example is not a very OO approach, but it can easily be made more reusable by wrapping things into classes or creating a component.

JavaScript Code:

//this function return to Flash ActiveX Object or Plugin depending upon browser //it takes care for browser type and returns the proper reference. //Accepts the id or name of or tag respectively //source taken from: www.moock.org

function thisMovie(movieName) { // IE and Netscape refer to the movie object differently. // This function returns the appropriate syntax depending on the browser.

if (navigator.appName.indexOf (“Microsoft”) !=-1) { return window[movieName]; } else { return window.document[movieName]; } } //success flag, set by flash/flex app var bFunctionCallFinished = true; //param delimiter, kind of unique string var paramDelimiter = “–>\(###\)##$$<–”; //this function would call a flash/flex function. function callFlashFunction(functionName, paramsArray) { if(bFunctionCallFinished) { //Get the reference so activeX or Plugin. flexApp is id/name of OBJECT/EMBED tags var flashObject = thisMovie(“flexApp”); bFunctionCallFinished = false; flashObject.SetVariable(“functionName”, functionName); flashObject.SetVariable(“functionParams”, paramsArray.join(paramDelimiter)); flashObject.SetVariable(“commitFunctionCall”, true); } else { //if previous function call is still being run, you can use setTimeOut etc to call it little later… } }

Flex Code(main.mxml):\

//the name of the function to be called. var functionName:String; //the params delimited by paramDelimiter var functionParams:String; //param delemiter, kind of unique string var paramDelimiter = "-->$$###$$##$$<--"; //setter, which executes the function and send the success flag back to javascript public function set commitFunctionCall(flag:Boolean):Void { var func:Function = this[functionName]; func.apply(this, functionParams.split(paramDelimiter)); getURL("javascript:bFunctionCallFinished=true;void(0)"); } function sayHi(name:String) { alert("Hi " + name); _ta.text += name + newline; } function setNum() { var n = arguments.length; for(var i=0;itext += arguments[i] + newline; } }

HTML Code:

//above JavaScript code goes here

Download the complete file from: http://www.abdulqabiz.com/blog/Flex_JSCommunication2.zip

Hope it’s useful for someone. Stay tuned, for new version JSFC library.
See complete post in flexcoder’s archive:
http://www.mail-archive.com/[email protected]/msg06106.html