I have a simple html doc with a flex app and an iframe side-by-side (using a 1×2 table).
There is a button in the flex app that, when clicked, sets the “src” property of the iframe to a URL by using the ExnternalInterface.call method to call a javascript function “doNavClick(url)”.
Or that’s the idea.
When I comment out the iframe object declaration in the html, the call to doNavClick works (I pop up an alert to test)….yet when the iframe declaration is present, it doesn’t even receive the call. It’s as if the iframe has somehow broken the call dispatching mechanism.
Is there a workaraound for this?
The problematic code is as follows:
— Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
paddingLeft="0" paddingRight="0"
paddingTop="0" paddingBottom="0"
>
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
private function doNavClick(event:MouseEvent):void
{
if (ExternalInterface.available)
{
var url:String = "http://www.google.com"
ExternalInterface.call("doNavClick", url); // Problematic with iframes
}
else
{
mx.controls.Alert.show("External interface not available");
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:Button label="Google" click="doNavClick(event)"/>
</mx:VBox>
</mx:Application>
…and the html/JavaScript code containing the swf app:
— index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My SWF Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("mySWFProj", "9.0.0");
</script>
<style>
html, body, div { height: 99%; }
</style>
</head>
<body>
<table border="1" width="100%" height="100%">
<tbody>
<tr>
<td style="width: 25%; height: 100%">
<div style="width: 100%; height: 100%">
<object id="mySWFProj" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="mySWFProj.swf" width="100%" height="100%">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</td>
<td style="width: 75%; height: 100%">
<div style="width: 100%; height: 100%">
<!-- <iframe id="htmlFrame" width="100%" height="100%" src="http://www.amazon.com"> -->
</div>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function doNavClick(url)
{
alert(url);
//document.getElementById('htmlFrame').src = url;
}
</script>
</body>
</html>
This code will simply pop up a browser alert with the google url in it. If you uncomment the iframe declaration (with id “htmlFrame”) and reload the page, the alert doesn’t show, in fact, the JavaScript doNavClick(url) never gets called.
UPDATE: Interesting….when I examine the DOM of index.html (I use firebug for this) the body usually has two child nodes – table & script. When the iframe declaration is present, the script child disappears…which explains why my ExternalInterface.call never goes anywhere. Why does the inclusion of an iframe cause my script object to be removed?
UPDATE2 : Moving the doNavScript(url) script into the “head” of the document fixes this problem. It is as if the iframe declaration prevents any other children being part of the body…I’m not saying that this is what is actually happening, only that this appears to be the symptom.
Place javascript code in the
<head>section of the html document.If anyone wishes to offer a fuller answer/explanation than this, I’ll happily award it as “accepted”….it feels wrong somehow to accept my own answer 😉