« Flash Versions of Lua, Ruby, Perl, and Python? | Main | Six Tools for Flex and AS3 Development »

Don't Use IFrames for HTML in Flex

The iframe solution to HTML in Flex has become a popular, unsupported way to embed HTML inside of a Flex application. I've written a lot about this, but I've never been very comfortable with the solution. I feel it's time to gather up all the information I've learned and start steering people away. I'll provide some potential alternatives to iframes at the end of the post.

About the IFrame Approach

The use of iframes is very clever- by using a special windowing mode of the Flash Player as well as an iframe, you can layer HTML on top of a Flash application. The HTML is completely separate, and so there's ExternalInterface communication that goes on between HTML and Flash.

The iframe approach is something that Christophe Coenrats came up with, which I ported to Flex 2, and which others have run with to make more versions. The other solutions include Alistair Rutherford's version and the commercial HTMLComponent.

What's Wrong with IFrames

So why shouldn't you use the iframe approach, if you can help it? Because of the setting of the wmode to opaque.

Just Everett wrote an excellent post on this a few years ago where he outlined three problems:

"1. Speed: There is no big surprise here, but when you force Flash to composite the HTML layers above and below, you are adding additional processor load.
2. Accessibility: wmode makes your movie invisible to screen readers
3. Inconsistent Performance"

I've had some experiences with the transparent wmode myself, which is when I started looking into this more again. I went back and looked at the comments about the iframe solution, and I noticed a lot of problems with the opaque wmode:

"Ctrl-Click" events are affected causing components such as the DataGrid to experience problems in FireFox. In this case, the DataGrid loses its ability to do a multiple selection of rows.

"..using "wmode=opaque" on Firefox(Win)leads to trouble like not working mousewheel and not accepting of special characters like "@" of flex2 textinput component.

"The content inside IFRAME gets a very annoying flicker effect which renders this approach into totally unusable under Mac OS 10.4 / Safari 2.0."

"...but some of the iframe content disappears until one of the flex controls gets the focus, at which time it all comes back. Very strange."

The many problems listed above, along with the troubling fact that they are browser-dependent, means that I don't feel comfortable recommending the iframe approach. I can see using it in special circumstances when you understand all of the limitations. But in general, I would use one of the alternatives below.

More on the Opaque WMode

The opaque wmode changes how the browser and the Flash player work together. It's a fairly fundamental change which causes a number of browser-dependent problems. You can read more general information about wmode in this communitymx article.

If you'd like more technical details on wmodes, you can read about it in Tinic's article about the new gpu wmode. He writes:

"opaque: Somewhat esoteric, but it is essentially like transparent, i.e. it is using DirectDraw in Internet Explorer. But instead of compositing the Flash Player just overwrites whatever is in the background. This mode behaves like normal on OSX and Linux."

I'll given some potential solutions to the problem after a word from our sponsors.

Solutions to the Problem

If you don't want to use the iframe solution anymore, what's the alternative? There's four different directions that you can go in:

1. Translate HTML tags into Flash
Alex Harui has a partial solution to this, and OSFlash has a whole browser in Flash. I haven't tried either of these, but they look promising.

2. Use AIR
If you can switch to an AIR application, see my post on creating HTML in AIR.

3. Don't layer HTML and Flash
Try to completely separate the HTML and Flash areas on the page or use a link instead of embedding HTML. Most likely this is something that was already considered and discarded, due to non-technical constraints or ease of development. But it's something to consider again.

4. Get a solution from Adobe
This isn't a short-term solution, but it may be possible to have a world where an opaque wmode doesn't cause any problems. I doubt it, though, because it could be problems within the browser instead of problems inside of the Flash player. See this Flex bug for a request for a supported iframe component and judah's post for a list of wmode bugs.

Comments (26)


none of those four options are particularly practical for everyone. Last year I used Judah's HTML component in a Flex 2 app to great effect.

it was 100% a Flex (Flash) app, not a hybrid Flash/HTML "page". the HTML was a single document with anchors that the Flex app called to scroll to selected parts of the HTML doc. on another tab of the app the whole HTML doc was displayed.

It had to be separate HTML content, a single doc with "bookmarks" that could be controlled via the Flex app. After fruitless attempts with the existing HTML control, Judah's IFrame HTML control gave me exactly what I needed.

Lets face it, the existing Flex HTML control is just too limiting, especially now people are getting used to what AIR can do. But sometimes a "throw-away" web app (close browser and you've "uninstalled" it) is what is spec'ed.



The most problems of HTML iFrame is caused by "Opaque WMode", but you can avoid using opaque for putting iFrame on top of the Flash.
Use two DIVs including iFrame for Flash and your html page by setting DIV z-index. However, in IE, there's something tricky for this solution...

Also there're some special usages (like integration with Flash popup window) for the Opaque/Transparent Flash, check out information.ondemand.com

barry.b, that's good to hear that things worked for you. But I still think that there's a lot of issues that occur and that the iframe should be avoided if at all possible. To be clear, though, if I had a contract where I was told that I had to have HTML in Flex and there was no budging on this, I'd definitely use it as a solution as well. :)

Jove, that's really interesting to hear. Do you have any more information on the two DIV solution? Does it use a different wmode? I'd love to add info on this to the post.

Allen Manning:


We have seen an issue where on some Macs the browser will spike to 99% using 'opaque wmode' and our Flex App. It made the application unusable.


Hi Brian,

I think I started using Flash at around Flash Player 6. The was the first time I figured out that Flash couldn't display HTML markup or HTML pages. It lacked this among a myriad of other things. Not too much later I found out you could layer div's on top of Flash. This meant to me is that I could have all the benefits the Flash Player offered plus the benefits of the browser (advanced text layout, tables, etc). So fast forward to Flex. I left developing for Flash (for good/ somewhat bitter) and a few weeks later a friend emailed me about Flex 2. I fought him and the idea of giving the Flash Player any more attention but in my investigation I saw enough reasons to develop for it than not at all. It was actually fun to develop again. I wasn't reinventing everything from scratch or fighting with the development model. But still there was no Rich Text Editor (it was very poor text editor in my opinion) and no HTML markup support or improvements.

So I want a way to display formatted rich text content in my Flex applications. Too bad... I want a way to create formatted rich text content in my Flex application. Too bad... I want a way to display PDF's in my Flex application... too bad. I want a way to display html pages in my Flex application... well, too bad on that too.

So I would run into Flex developers that worked for companies that had millions of HTML documents already created. And other companies that had millions of records of data formatted in HTML markup and all of them had legacy systems build for the browser that couldn't be ported over but they still wanted to leverage Flex. So there is still no way to display HTML and if something is coming in the future there is nothing to help in the transition period. This is where the HTML Component comes in.

In my opinion if you want something for Adobe to do that would help us all it would be to create an real and advanced Rich Text Editor (base it on the Buzzword engine) with a complimentary Text component to display it. That is the foundation that needs to be laid to solve all the other problems we are all trying to solve.

BTW A lot of the issues I mentioned in my post have been solved by the Flash Player team, Firefox team, Safari team and fixes I've worked on... anyone can contact me for the latest update.

Having blabbed on about that, I really do hope and look forward to anything Adobe can do to solve these issues.


Hi Judah, thanks for the thoughtful response. I had no idea, when I linked to your list of wmode bugs above, that you're the same person who wrote the HTMLComponent I also referenced above.

Perhaps the new text area in Flex 4 will become a Rich Text Editor? I haven't looked into it.

It's interesting to hear that the player team has solved many of the issues. Is this in an unreleased version of the player? I've certainly still seen a bunch of issues with transparent mode (which is what I think Al meant to say above, as we both saw the transparent mode problems), and people are still commenting about the problems in my blogs posts.

It's great to see that you are thinking so much about these issues, which is excellent for the people who are using HTMLComponent.

Judah was kind enough to send me the latest version of HTMLComponent to check out, and while I only had time to glance at it today, I can see that he's put a lot of effort into it, and that it's trying to handle a lot of the peculiarities of the iframe. I still can't say that I'd suggest people use the iframe approach, but if it's your only hope, check out his component.

Benjamin Boccara:

I just tested the different examples showed on the HMTLComponent page. Though it's quite impressive to have a real HTML component in a Flex application, it still doesn't resolve one major bug Firefox users on PC encounter:

For my current project, I only need html and wmode to embed some google ads. Do any of you guys know a way to do so without using html and wmode?

Dave Friesen:

Through all of this, I'm curious if anyone come up with a simple, clean way to display PDFs "inside" Flex containers (i.e., Web/Flash, vs. AIR which has the issue handled through HTMLLoader(), etc.), consistently across browser types? I've tried the IFrame solution for this but it's tricky and inconsistent.



Hello Dave, I was going to take the same direction. What do you mean by tricky and inconsistent... ?
I'll post the result of my investigation.

If you've read all of this and are still going to use an iframe solution, this looks like an excellent one: http://code.google.com/p/flex-iframe/


thello frnd,
i tried to show multiple images with titles in textarea in fle, but it not worked, but its working with iframe propelly,
wat is the exact solution to show images properlly in flex without iframe ?



I used the HTMLComponent as I thought it was a good idea to include editor like Xinha in Flex as a RichTextEditor.. But you're right : the wmode issue is too annoying (not only @ but also accent also for French users...) so I drop this idea.. and like yo, unfortunatly, I'm waiting for a clean solution...

adrian sule:

There is an issue with IE (6.0):
If you open the demo project "IFrameCommTest" from google code, in IE the IFrame will display a white background. In FireFox the background is transparent.
I have uploaded the example:

And when I open the same page on localy, the html content disapears in IE, and I get only a white background.

Solutions are welcome


kandasami raja:

i run the latest version of fb3_1_3_2.zip package iFrameDemo.mxml . the corresponding screen flawly displayed in mozilla firefox 3.0.6 but working fine in IE 6 . is there anything to change the javascript function code in iFrame.as

i need it very urgent can u kindly reply
tp my mail id kandaraja@gmail.com

thanks & regards
kandasami raja.c



I want to show only the movie within the iframe
How can we find movies within the Iframe,
If any suggestions,

Steve Berube:

We have written our own flex iFrame control with success so far and is currently use in our of our production products. All the issues outlined in this article are dead on. The ugly truth is its a giant hack to get around a severly lacking feature of flex.

If you would like to see a fix from Adobe, we are pushing them hard on this but also your voice would help by voting on this bug/feature: http://bugs.adobe.com/jira/browse/SDK-13740

They do have options to solve this but none that are in the product right now. And flex 4 seems more focused on graphic capabilities than actual foundation features. I personally think Adobe is missing the mark with flex 4.

Mitesh panchal:

Hi,I have an image and i want to remove white color from image.That removing color is same like its background color.If anybody have any idea of this problem please reply me on mitesh@clientdriveninnovation.com .And my application in Flex 3 so please send me action script code of this problem.Thank you


> 3. Don't layer HTML and Flash
> ... separate the HTML and Flash areas ...

I'm not sure what you mean by this. Could you give a (simple) example?

Steve Bossie, what I meant by that is to not put HTML inside of Flash but just have Flash inside of HTML. If you can find a way to keep using Flash in the normal way (instead of using an iframe), you'll avoid all of the issues mentioned in this post.

Steve Berube, thanks for the pointer to the SDK bug, as I hadn't seen it before. I think this is something that needs to get fixed at the player level and not at the Flex level, and hopefully they are thinking about ways to make this better in the next release.

As Jove mentioned above the 2 div layer method works quite well. I built a CMS in Flash 2 years ago that utilized this method and it worked beautifully. The CMS needed a WYSIWYG html editor and there was no way to pull it off in Flash. Instead we used javascript to communicate between Flash and the html WYSIWYG editor much like the IFrame method but much cleaner since it was div based. The was 'wrapped' with window panel in the flash app that allowed the html div to be repositioned and resized from the flash app. To the end user dragging/resizing and using the editing window in the flash app, they had no clue the WYSIWYG was actually a HTML/Javascript editor being controlled by flash. It was a very clean implementation.


This helps me very much

Thanks a lot


is there any way to render html content other than iframe and in flex3?

Everyone may want to vote for these issues so Adobe raises its lumbering head to our needs:


U say right

i am use this and find that it is very difficult to manage when your swf embed in HTML page.

So avoid to use of Iframe in Flex

Tahir Alvi