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:
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.