Flex: IFrame HTML Component v1.1

22 Responses to “Flex: IFrame HTML Component v1.1”

1. susurs on November 5th, 2007 7:52 pm

   Hi!
   Tried to implement this component in one of my project with a some degree of success…
   There is probably a bug. Let me explain the nature of it:
   1. create canvas which are for example 600px in height and insert this component there;
   2. compile and run in fullscreen;
   3. now resize browser window, so it is less than 600px in height.. and… scroll down..
   4. now you can see the problem – flex content is scrolled up, but Iframe stay’s in the same position

   Any solutions or ideas? ..probably there should be added some code to handle particular situation, when flex application relative coordinates of 0,0 are outside viewable area of browser to properly reposition Iframe.
   Regards,
   Juris

2. Administrator on November 6th, 2007 1:38 pm

   susurs, not sure I follow this. You want to the iframe size to match the size of the containing canvas? This is both straight forward and a bit ‘involved’ at the same time.

   In flexTraffic I have a function which gets called on a resize of the frame

   When the iframe detects a resize the controller calls the function:

   
   public function onResize():void
   {
   var ev:ResizeFrameEvent = new ResizeFrameEvent(map.width, map.height);
   this.dispatchEvent(ev);
   }
   

   A listener is registered in the javascript (see the communication demo) so that when this event is detected it resizes the target div which holds the map:

   
       try
       {
       	var mapDiv = document.getElementById("map");
       	mapDiv.style.width = width+"px";
       	mapDiv.style.height = height+"px";
       	this.map.checkResize();
       }
       catch(e)
       {
       	alert(e);
       }
   

   This way resizing the flex app keeps the iframe size in check.

   Looks like I should create a more complicated demo.

3. Dave P on November 8th, 2007 11:17 pm

   Hi Alistair,

   Embedded code into a sample app and works great in IE 7.

   In Firefox 2.0.0.9 (with Firebug installed) – get the following error:

   uncaught exception: Permission denied to set property Window.Vars

   line: 456 setTitle: function(title) {

   The iFrame does not display (but flashes briefly when the window is resized).

   Used Flex 3 to build.

   Very new to Flex so may be something on my end. If I can figure out more I will let you know.

   Great addition to Flex!

   dp

4. Administrator on November 11th, 2007 3:03 pm

   Dave, This might be the same error I mention in the sidebar post for the IFrame here

   http://ccgi.arutherford.plus.com/blog/wordpress/?page_id=136

   I mention that it could be a Firefox plugin but I am starting to _think_ it might be something to do with serving the page up as a file and not through a web server. The circumstances of developing the IFrame meant I was using a local install of Apache and quite possibly if you view your application from a web server you will find the error ‘goes away’. I say ‘possibly’ cos I haven’t tried it.

   I intend to convert the existing demos to serve up as files so I will find out soon enough if this is the case or not.

5. Mohammed Saleem on November 13th, 2007 5:54 pm

   This was very helpful. Thanks.

   I had an issue when I wanted to dynamically add the component. Since there is no id, I guess it doesn’t know which one to pick up. I am very new to Flex and ActionScript, so I may have over looked something here. Let me know.

6. Dipak on November 14th, 2007 5:23 am

   Hi,

   Thanks for the post. I also seem to have the same issue as mentioned by Dave above. This seems to work fine with IE, but is not visible in Firefox. The IFrame flashes and seem to be working in the background, but does not display…

   regards,
   D

7. Dave P on November 14th, 2007 7:11 pm

   Thanks Alistair,

   I’m a good month away from running on a server, but when that time comes, I’ll post back with my results.

   Thanks again,

   dp

8. Dipak on November 14th, 2007 10:38 pm

   Got firefox to display the iFrame by setting the wmode to “opaque”. I am embedding the iFrame in a TitleWindow pop-up. If I move the titlewindow around the iFrame somehow doesn’t seem to follow suit (even though it is a component within the TitleWindow). Is there a way the iFrame can inherit this property from the parent titlewindow…

   regards,
   D

9. Administrator on November 17th, 2007 12:18 am

   Mohammed, could you explain this further.

   Dipak, Yes there are issues with using this in a popup. The iframe is essentially punching a hole though the Flex app into the browser so it works within a specific band of usage. If you think about it there is no way this should work and yet… I have had an email about popups with regards to the issue of destroying the iframe so it may be doable. If someone has got this working perhaps they could post and explain how they did it.

10. Dipak on November 20th, 2007 9:54 pm

    Hi,

    Not sure if this is the right way to do it, but here’s what I did to get the IFrame to move with the titlewindow popup. The titlewindow listens for a mouse up event and when the drag is completed, it calls the moveIFrame() function. Also I had to change the moveIFrame() function declaration to public from private in the IFrame.as file.

    regards,
    D

11. ï¼·ay on December 7th, 2007 9:23 am

    Hi,

    I am going to use the Iframe to load a servlet. In the page I have to post/get data to the page. I have tried to make the source of iframe to “http://www.hello.com/servlet?message=hello”

    However, the servlet cannot get the parameter message but it does just normally type in the path in browser … is there any other method that can use the Iframe component to post/get data to the page?

    Thx.

    Regards,
    Way

12. Administrator on December 7th, 2007 3:10 pm

    Way, I am guessing here but this could be something to do with the fact the html page is rendered inside an iframe embedded into the browser page. Otherwise, I can’t see why this wouldn’t work. I would examine what exactly the ‘request’ object is composed of in your jsp.

13. Larry Hughes on January 13th, 2008 1:57 am

    Hi,

    I like to make a comment on what susurs asked awhile back since I’m running into the same problem. My iFrame is a small 200 x 200 window on the right-hand side of my Flex application. When I initially load the application– IE or Firefox– at max, the iframe is set at that position. Now when I resize the browser window, all of my flex components (Panel, etc) get either moved, resized, or both accordingly. However, the iframe does not. It just stays at its position (almost like its absolute positioning). Hence when I make the browser window smaller, the iframe and its contents just disappear. I think this is what susurs was experiencing too.

    Anyway, I made the IFrame’s moveIFrame() method public, and then added a ‘resize=”iFrame.moveIFrame();”‘ attribute on my parent Panel. It seems to resize accordingly to a certain extent, although there are times when I just click on the “maximum” or “restore down” of the browser and the iFrame is way out of position.

    Any ideas on how to resize appropriately? I think you’ve tried to answer part of this question above with a sample code snippet from your flextraffic. However, seems like there is missing code in your post… maybe if you have the entire flextraffic builder sample zipped up for us to take a look?

    Appreciate the work you’ve done!

    -Larry

14. Administrator on January 14th, 2008 12:24 am

    Larry, I have had another go at outlining the resize procedure in my latest blog post:

    http://ccgi.arutherford.plus.com/blog/wordpress/?p=163

15. Orian Marx on April 19th, 2008 6:44 am

    Alistair, you’ve really done some awesome work here. I made a slight modification that you might want to implement in a better way. I am switching between using the “content” and “source” properties of the IFrame on the fly, and in order to get it to work I had to make the following changes:

    In the setters for content and source in IFrame.as, remove the if statements. Then, if setting the content property on your IFrame instance, set the source property to null. If setting the source property, set the content property to null.

16. Orian Marx on April 19th, 2008 7:34 am

    Also, although I haven’t tested the multiple selection bug with the datagrid, it does seem that wmode=opaque kills scrolling in any list based controls (at least using Flex 3 and Firefox)

17. Administrator on April 21st, 2008 9:06 am

    Orian, Yes it kills the scrollwheel scrolling if that’s what you mean. I like your suggestion for the change to the IFrame I will look into that.

    Al.

18. Vivek on June 5th, 2008 2:31 pm

    Hi,
    I am facing a small problem when I run this application, when I click on IFrame and again click out the IFrame other than tab, IFrame is invisible.

    Could someone help me,
    Thanks,
    –Vivek

19. Administrator on June 8th, 2008 4:31 pm

    Vivek, This sounds like you haven’t implemented the ‘wmode=opaque’ setting in the html holder file. Make sure you have read “Things to remember (PLEASE READ THIS BEFORE USING THE IFRAME)” section on the IFrame entry on the ‘Projects’ page.

    Al.

20. Jim Falk on October 6th, 2008 3:29 pm

    Thank you for your fine work on the IFrame. I notice one problem; it is always in the foreground. If I put up a flex Alert box, it is behind the IFrame. If I put up a popup window, it is also behind the IFrame. Tooltips that are close to the border of the IFrame also are clipped by the IFrame being in the foreground. Any way around this problem? I tried setting the IFrames z-index, child index — no change.

    Jim

21. Administrator on October 8th, 2008 10:38 pm

    Jim, You are correct. The problem with the IFrame is that there is essentially a hole in your Flex app where the IFrame goes. The html is rendered into this. I’m afraid there is no way around this. I recommend adding a handler to set the background to visible=false when your foreground window is being displayed. If you look at the examples you will see this in action. In particular examine the map example:

    http://ccgi.arutherford.plus.com/website/flex/iframe/IFrameMapDemo/

    There is no way around this. You will have to design you app to hide the IFrame or not put anything in front.

    I thought this was clear from the notes but I see that is not the case.

22. ïîðíî îíëàéí on October 27th, 2008 10:25 pm

    I esteemed yours blog,
    thanks the author a lot of useful to myself have found..

Leave a Reply