Flex, IFrame and SWFObject

[newtriks]

Hi all,

I am a strong advocate for SWFObject and first up would like to say
thanks to all for the hard work in creating it.

Onto my little head scratch issue. Within a flex application I _have_
to embed some html and am using an IFrame as provided on
http://code.google.com/p/flex-iframe/ to achieve this. This actually
works very well using the standard html wrapper provided by Flex
Builder 3. I have since ported the wrapper to use SWFObject and found
that this actually now breaks the IFrame embedding. The result is the
Iframe displays outside of the html content and is not displayed
within the Flex app? Seeing as this _did_ work before the
introduction of SWFObject I conclude that something is happening under
the hood which I am unaware of. Any help woul dbe appreciated.

Here some simple source as an example http://www.newtriks.com/downloads/IFrameDemo.zip

Cheers,

Simon

[Aran Rhee]

Hi Simon.

 

The quickest way that we can try to help is if you post a link up for a complete (and simple) use case example. This way everyone can look a the same thing (as opposed to having to individually setup a Flex project from your source etc). It sounds like from what you are saying that it is just some CSS values getting messed up to position the iframe in the correct place.

 

 

Cheers,

Aran

[newtriks]

Hi Aran,

Sure, here is the url to the app:

http://www.newtriks.com/apps/IFrameExample/IFrameDemo.html

And here is the source code for it:

http://www.newtriks.com/apps/IFrameExample/srcview/index.html

Cheers,

Simon

On Jun 17, 2:25 pm, Aran Rhee <aran.r...@gmail.com> wrote:
> Hi Simon.
>
> The quickest way that we can try to help is if you post a link up for a
> complete (and simple) use case example. This way everyone can look a the
> same thing (as opposed to having to individually setup a Flex project from
> your source etc). It sounds like from what you are saying that it is just
> some CSS values getting messed up to position the iframe in the correct
> place.
>
> Cheers,
> Aran
>
>
>
> On Wed, Jun 17, 2009 at 7:14 PM, newtriks <newtr...@googlemail.com> wrote:
>
> > Hi all,
>
> > I am a strong advocate for SWFObject and first up would like to say
> > thanks to all for the hard work in creating it.
>
> > Onto my little head scratch issue.  Within a flex application I _have_
> > to embed some html and am using an IFrame as provided on

> >http://code.google.com/p/flex-iframe/to achieve this.  This actually

[Aran Rhee]

Simon.

 

Ok, I can see what is happening now. Can I verify that it also works for you in IE, but not in Firefox / Safari etc?

 

I can get it to behave if I use firebug to modify some CSS positional settings for the iframe in FF, so it is definitely CSS related. As the swf is published at 100% w/h, there needs to be a bit of extra CSS added in order for things to display correctly. See FAQ #1: http://code.google.com/p/swfobject/wiki/faq

 

Also, is there any reason you are using the createCSS() method through SWFObject rather than just defining a normal CSS declaration?

 

 

After poking around a bit in the differences in the generated code between IE and FF, and could see that FF was missing the CSS required for it's absolute positioning, so I added the CSS declaration for #myFrame (as seen in IE) to the page.

 

All is working now, and tested in IE7/8, FF3, Safari 4 and Chrome.

 

See example here:

http://www.misterhee.com/tests/flex.iframe/IFrameDemo.html

 

 

I am sure you can remove a lot of the CSS declarations from #myFrame, but I will leave that up to you to experiment with. I think the only important ones are:

POSITION: absolute; TOP: 30px; LEFT: 10px;

 

Looking through IFrame.as, it looks like the moveIFrame() function may not be getting called at the right time? Maybe you could try experimenting if calling moveIFrame() from your Flex app (with a button press etc) after init actually resolves it.

 

Another solution is to strip out the create/hide/move js functions from Flex injecting them into the DOM invisibly and just declare them on the page or a seperate js file. This way you can call them from the hosting page when you like and "fix" any issues.

 

Anyhow, you have aw solution if your app is fixed to the top left of the browser window...

 

 

Aran

[newtriks]

Aran thanks for your time and effort there, its much appreciated, I
will look into what you have written. Cheers for your help, Simon

> > > >http://code.google.com/p/flex-iframe/toachieve this.  This actually

[newtriks]

I have now removed the example error code and written this solution on
my blog, cheers Aran:

http://www.nutrixinteractive.com/blog/?p=465

> > > > >http://code.google.com/p/flex-iframe/toachievethis.  This actually

[Aran Rhee]

Simon.

 

I'm glad to managed to poke around and find what was actually causing the issue. Being forced to use a certain doc type ain't great though... I generally use XHTML as a doctype.

 

BTW - you may want to run your page through a W3C validator. it fails badly at the moment as your tags are all XHTML style.

 

 

Aran