I wanted to create an "dialog" as an html form in an iframe rather than opening a separate browser window for uploading image files. I also wanted to create an html page preview using an iframe as well.
I spent an entire Sunday working at this and none of my efforts have succeeded satisfactorily. I researched the web and came across Crostophe Coenrats' article, and after modifying it for Flex 2 / AS3, I still didn't get no satisfaction. A little more research and I found Brian Deitte's update for AS3 as well and tried his solution, and still no joy. I tried every variation I could think of, working with fscommand, navigateToURL, and of course, ExternalInterface. It appears that it doesn't matter which strategy you use. In all cases, I came close to achieving what I wanted. The problem even in the simplest case is that clicking in the iframe, then clicking outside of it, causes the iframe to disappear until something causes the iframe to refresh with IE, and nada for FireFox (I'm using IE 6 and FireFox 1.5.0.1 on Windows XP SP2, and of course, Flash 8.5). Here's a distilled set of the code primarily based on Conraets/Deitte's work: Test.mxml ========= <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"> <mx:HBox> <mx:Text text="http://"; /> <mx:TextInput id="uri" text="www.adobe.com/" /> <mx:Button label="Go" click="go()" /> </mx:HBox> <mx:Script> <![CDATA[ import flash.external.ExternalInterface; function go(): void { if (!ExternalInterface.available) { trace("ExternalInterface not available"); return; } if (uri.text) { ExternalInterface.call("loadIFrame", "testFrame", "http://"; + uri.text); ExternalInterface.call("moveIFrame", "testFrame", 20, 60, 400, 500); ExternalInterface.call("showIFrame", "testFrame"); } } ]]> </mx:Script> </mx:Application> iframe.js ========= function loadIFrame(id, uri) { var f = document.getElementById(id); f.style.left = 20; f.style.top = 80; f.width = 400; f.height = 400; f.style.visibility = "visible"; top.frames["testFrame"].location.href = uri; // alert("loadIFrame: " + id + ", " + uri); } function showIFrame(id){ document.getElementById(id).style.visibility="visible"; // alert("showIFrame: " + id); } function hideIFrame(){ document.getElementById(id).style.visibility="hidden"; // alert("hideIFrame: " + id); } function moveIFrame(id, x, y, w, h) { var frameRef=document.getElementById(id); frameRef.style.left = x; frameRef.style.top = y; frameRef.width = w; frameRef.height = h; // alert("moveIFrame: " + id + " (" + x + ", " + y + width + ", " + height + ")"); } // Ex: type in browser url bar: // javascript:testIFrame("testFrame", "http://www.cnn.com";) function testIFrame(id, uri) { var f = document.getElementById(id); f.style.left = 10; f.style.top = 10; f.width = 400; f.height = 400; f.style.visibility = "visible"; top.frames["testFrame"].location.href = uri; } In the HTML wrapper (I modified html-template/index.template.html) =================== (In the <head> element) <script src="iframe.js" language="javascript"></script> (At the end of the <body> element) <iframe id="testFrame" name="testFrame" frameborder="0" style="position:absolute;background-color:transparent;border:0px;visibil ity:visible;"> </iframe> The javascript testIFrame function is there just to demonstrate that even with a completely empty application, like this... <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"> </mx:Application> ...after you load the app in the browser, you can enter this in the url bar: javascript:testIFrame("testFrame", "http://www.cnn.com";) ...and still get weird behavior. If Adobe provides robust iframe support, that would really, really be awesome. What did actually work really whetted my appetite. This opens the door to some very coolly hybrid UIs and I hope it is something they can get fixed very soon. I know it would impress a lot of other people at my own work.... -Tony tony pujals| senior engineer | Yahoo! SiteBuilder Express p. 408.349.6284 | e. tonyp * yahoo-inc * com | y!id tonypujals -- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/flexcoders/ <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
