Flex 2 and IFrames

Posted on November 16, 2006 | 19 comments

Christophe Coenraets did a Flex and IFrame example a while back. His code was before Flex 2 was release and it was never updated. I have updated the code, in connection with my last post about Flex Search mashup.

Here is the original post/code:
http://coenraets.com/viewarticle.jsp?articleId=95

You can find the newer IFrame at
http://renaun.com/flex2/posts/flexsearch/index.html

I had to change the normal Flex 1.5 to Flex 2 release stuff, like V(v)oid and property compiler error fixes. But the way the class talks to JavaScript was a little more, I changed out the getURL method of talking to JS and used the newer ExternalInterface. It was quite simply and a lot cleaner way of talking the JS on the page, that ends up talking to the IFrame.

I also added two bindable properties to the class, globalX and globalY. I used this to put buttons around the x,y of the IFrame. This is because the IFrame sits on top of the Flex app so you can’t put buttons on top of the IFrame but you can position them close by so I needed the coords.

Well have fun and enjoy.

PS: I was informed that Brian Deitte had done a port already, well now there are two they came out about the same so thats a good thing.
http://www.deitte.com/IFrameDemo3/srcview/index.html

Share the post "Flex 2 and IFrames"

  • http://www.aknak.com Roland Rodriguez

    Can you use IFrame to embed a PDF link?

  • http://www.renaun.com Renaun Erickson

    should be able to its an IFrame, so any valid HTML is good to go.

  • http://www.i-accommodate.com Chris Robinson

    with the iframe control how would we interact with a javascript function which is part of the html containers inner page please.

  • Tom Barclay

    I get some crazy results when I place the iframe component in an accordion navigator. The first time the page is displayed, clicking on any other component hides the html page, but that does not happen if the page is refreshed. Also, the accordion navigator does not seem to work properly when the iframe component is displayed. Any ideas?

    http://www.fasterhorses.us/ncha/nchaI.html

  • http://www.renaun.com Renaun Erickson

    Chris,

    Because of cross domain security issues you have to do this only from the same domain. Then if you want to do IFrame back to the Flex you’ll need to look into ExternalInterface.

    Tom,

    Not sure about this, I am not seeing anything come up in the accordion.

  • Tom Barclay

    You should be seeing a Google Map on the “Map View” accordion element.

  • http://www.renaun.com Renaun Erickson

    I see it if I click and drag the google map area. When I open up the other accordion it doesn’t resize the iframe component. I would have to mess with code to dive further into it. Can you provide a simplified mxml file that causes the same issue?

  • Tom Barclay

    Sure. You can place any html page in the iFrame and the same thing happens but here it is…
    ncha1.mxml:

    nchaMap.html: (I changed the google key for security)

    NCHA Map

    v\:* {
    behavior:url(#default#VML);
    }

    //

  • Tom Barclay

    I guess sending you the mxml and html source through the post didn’t work too well. How would you like me to send it to you?

  • Javi

    I have the same problem (the html is heading when the user click on the screen and the Iframe component is included in a tiltewindow).

    the solution is: (thanks to http://chattyfig.figleaf.com/pipermail/flashcoders/2004-January/101731.html)

    in your html code,
    1.- delete all script about the check version (AC_FL_RunContent)
    2.- add the tag in the object embeded code
    3.- Delete the tag and

    that’s all

    Javi

  • Tom Barclay

    Actually, Renaun went above and beyond the call and fixed this for me by tying the visibility of the iFrame to the focus of the accordion container. Thanks!

  • Christopher Stolte

    Hey Tom,

    Could you explain exactly how you “tied the visibility of the iFrame to the focus of the accordion container”?

    I am trying to do exactly the same thing (i.e. Google Map inside an accordion) and am having weird issues with refreshing and visiblity.

    Thanks!

  • Matthew Ryan

    I am using your IFrame.mxml and for some strange reason I get an OpenWindow-like event with a new browser window and the page loading in that, instead of the area I have set the IFrame tag in my Main.mxml.

    Any ideas?

    Is it possible to get your HTML that you use to embed FlexSearchMain.mxml ?

    Regards,

    Matt

  • http://www.renaun.com Renaun Erickson

    Does it happen on all browsers? OSs?

  • nD

    I am trying out this in Flex 3 beta. Funny thing is, the content of iframe shows an popup instead of showing within the frame itself.

  • Nyles

    I have been trying to use IFrame in flex2 and flex3 and get blank screens if i try to build with default settings, and with html-off, i get security errors and a failed execution. Any ideas?

  • Gudel

    @ Nyles

    Same Here, And I still have this problem.

    I Used to use the same source and i made it, but when I Compile Again Now it’s fail, and my problem same as yours

  • Ron

    Using your IFrame component…the url source comes up in a pop up. Why?

  • http://arielsommeria.com/blog/ ariel sommeria

    Hi,
    I just posted some addtionnal info regarding zooming with IFrames.
    http://arielsommeria.com/blog/2009/04/22/firefoxs-zoom-messes-up-iframes-with-flex-heres-the-fix/
    Ariel