title: Flex/AIR calling Javascript functions
body: <p>I have problem with calling javascript function from my AIR / Flex App. In web App this is easy with externallInterface, but in native app it is a problem. My AIR app is similar like this ....</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
  initialize="init()" ... &gt;
  
  
  &lt;mx:Script&gt;
          &lt;![CDATA[   
  
        private function init():void
              {
                myHTML.addEventListener(Event.HTML_DOM_INITIALIZE,DOMInit);
                  myHTML.location="myAIRHTML.html";
  
              }
  
              private function DOMInit(e:Event):void{
                  myHTML.htmlLoader.window.inputFunction = testInputFunction;             
              }
        private function testInputFunction(so:String):void{
        //some code    ......
        }
  
        public function someFunction(e:AIREvent):void{
                  myHTML.htmlLoader.window.outputFunction(e.param);
              }
  
            _]]&gt;
  &lt;/mx:Script&gt;
  
  &lt;mx:HTML id="myHTML" width="5" height="5" visible="true" /&gt;
  
  &lt;/mx:WindowedApplication&gt;
  </code></pre>
  
  <p>myAIRHTML.html is</p>
  
  <pre><code>&lt;html&gt;      
      &lt;head&gt;
          &lt;script language="Javascript"&gt;
  
  
              var interface = {};     
  
              function outputFunction(param){     
                  var childInterface = document.getElementById("mySandbox").childSandboxBridge;
  
                  childInterface.remoteFunction(param);
              }
  
  
              interface.inputFunction = function(someData){
                  testInputFunction(someData);
              }                                  
              function initBridge(){
                 document.getElementById("mySandbox").parentSandboxBridge = interface;
        }
          &lt;/script&gt;
      &lt;/head&gt;     
      &lt;body&gt;         
          &lt;iframe id="mySandbox"
              src="js.html" 
              sandboxRoot="http://remote.example.com/js/" 
              documentRoot="app:/myAIRSandbox/"
        ondominitialize="initBridge()"&gt;
          &lt;/iframe&gt;
       &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>and js.html is </p>
  
  <pre><code>&lt;html&gt;          
   &lt;head&gt;
       &lt;script language="Javascript" src="http://www/otherexample.com/other.js"&gt;&lt;/script&gt;
  
         &lt;script language="Javascript" &gt;
  
               var interface = {};
  
               interface.remoteFunction = function(st){  
                  alert("st");
                  callFunctionInOtherJS(st);
               }
  
  
               window.childSandboxBridge = interface;                    
  
               var someObject = {};
  
               someObject.SomeFunction = function(someParam){
                  window.parentSandboxBridge.inputFunction(someParam);   
               }  
  
         &lt;/script&gt;
    &lt;/head&gt;   
  
      &lt;body &gt;&lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>This throw  "TypeError: Undefined value" when I call "remoteFunction" in myAIRHTML.html. It something important what I missed? Can anyone help? It something important what I forget about documentRoot - I don't use this name on other place ..... Thanks for all replies</p>