« Save your CSS with the Flex 2 Styles Creator | Main | Using Resource Bundles in Flex »

Finally Updated: Embedding HTML in a Flex application using an IFrame

I've updated to Flex 2 (and which can also be used in Flex 3) the code by Christophe Coenraets for embedding HTML in a Flex application using an iframe.

You can see a demo of it here.

You can download the code here.

To run locally, first compile IFrameDemo.mxml. If you are using Flex Builder, unclick "Generate HTML wrapper file" in the Flex Compiler settings before publishing, since there is an existing HTML wrapper. After this, you can view IFrameDemo.html. If you get a "Security sandbox violation" error, you need to put the IFrameDemo directory in the local-trusted sandbox. See the Flex documentation for information on updating FlashPlayerTrust files.

There's been some comments below that say these instructions are no longer valid in Flex Builder 3. So check out the comments if these instructions don't work for you.

The one cause for limitations in this code is the use of opaque for wmode. I've seen reports of tabbing problems in the player, and running more than one player when using opaque wmode seems to degrade performance.

Check below the ad for some very important updates. The comments also have a lot of excellent details in them.

Update 1: see this post for an update to the code that needs less HTML changes, allows multiple HTML pages to be referenced at once, and controls the HTML visibility as needed.

Update 2 (an important update that I highly suggest you read): for my new views on iframes and Flex, read my post from July 2008: Don't Use IFrames for HTML in Flex

Comments (186)

Nick:

Something strange I noticed... when displaying CF generated FlashPaper in the IFrame, you can only click it once before it loses focus and you cannot click it again. So like if you click the scrollbar to see more of the document, the next click won't do anything. However, if you click in the address bar of the browser, you can then click something in the FlashPaper again. Weird.

Christian:

Maybe I'm just doing something stupid, but when I view your example, everything works fine, however when I try to run it locally, none of the pages are loading in the IFrame. I'm not getting any compile or runtime errors, so I'm at a loss as to what I'm doing wrong. Is anyone else experiencing this? Help...please....

Brian Deitte:

Nick, I've never heard of that problem either. I would suggest loading the FlashPaper via flash.display.Loader if you can. Unless there's a bug with this, loading SWFs through Loader will work better.

Christian, are you viewing IFrameDemo.html, not IFrameDemo.swf? Are you using the debug player and checking flashlog.txt? Did you try different browsers to look for errors?

Mike:

I'm having the same problem as Christian. I can see the panels and the tree, but the iFrame is blank (just the white background). I have imported the the files into Flex Builder and then copied the bin folder up to a web server and run the html file from there....still no luck. Any ideas?

Brian Deitte:

I just retried things myself, and they work for me. I'm using the command-line compiler however. In Flex Builder, you need to unclick "Generate HTML wrapper file" in the Flex Compiler settings, since there is an existing HTML wrapper. I updated the post to include this information. Try doing this and let me know if it fixes things.

Thor:

One thing that I'm having trouble with.

I tried the links I need to load, but they apparently cannot include GET variables in the url, as flex builder rejects those saying that the get variables must end with a semi-colon, which is rather bizarre.

I'm pretty new at Flex, so forgive me if I missed something obvious... but I would appreciate any suggestions or input.

This is a great function and I will definitely be using it.