Calling JavaScript function in Flex-iFrame html is not happening

Question

In my flex application, I'm having a flex-iframe in which I'm loading a HTMLfile. I have to call a javascript function defined in loaded HTML file.

I'm making use of callIFrameFunction('jsfunctionname'). I'm using flex-iframe-1.4.6.swc & flex 4.1 SDK.

But, the javascript function is not invoked anyhow and it is not executed. I have placed the html file in the same directory where the mxml file resides.

I have embedded the code below. Kindly, if you got some ideas, please share your views.

<flexiframe:IFrame id="iFrameWithJSfunctions"
                       label="Map"
                       source="pageWithJSfunctions.html"
                       frameLoad="callShowAlert(event)"
                       width="400"
                       height="120"
                       overlayDetection="true" />

/**
     * Call the 'showAlert()' JavaScript method.
     */
    private function callShowAlert(event:Event):void
    {
        iFrameWithJSfunctions.callIFrameFunction('showAlert');
    }

Answer 1

Why you don't use the simple call of javascript function from Flex like this

<fx:Script>
    <![CDATA[
        private function callJavaScript():void {
            ExternalInterface.call("showAlert");
        }
    ]]>
</fx:Script>

<s:Button label="Show Alert"
        click="callJavaScript();" />