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.
http://tech.groups.yahoo.com/group/flexcoders/message/89804
Posted by barry.b | July 13, 2008 8:58 PM
Posted on July 13, 2008 20:58
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
Posted by Jove | July 13, 2008 10:42 PM
Posted on July 13, 2008 22:42
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.
Posted by Brian Deitte | July 13, 2008 10:57 PM
Posted on July 13, 2008 22:57
Brian,
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.
Best,
al
Posted by Allen Manning | July 14, 2008 10:05 AM
Posted on July 14, 2008 10:05
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.
Judah
Posted by Judah | July 15, 2008 2:03 AM
Posted on July 15, 2008 02:03
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.
Posted by Brian Deitte | July 20, 2008 4:08 PM
Posted on July 20, 2008 16:08
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.
Posted by Brian Deitte | July 20, 2008 4:14 PM
Posted on July 20, 2008 16:14
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:
https://bugzilla.mozilla.org/show_bug.cgi?id=347185
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?
Posted by Benjamin Boccara | August 17, 2008 5:36 AM
Posted on August 17, 2008 05:36
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.
Thanks!
Posted by Dave Friesen | August 26, 2008 8:16 PM
Posted on August 26, 2008 20:16
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.
Posted by Cedric | October 3, 2008 3:26 AM
Posted on October 3, 2008 03:26
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/
Posted by Brian Deitte | October 29, 2008 9:19 PM
Posted on October 29, 2008 21:19
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 ?
:)
Posted by abhishek | November 17, 2008 4:03 AM
Posted on November 17, 2008 04:03
Brian
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...
Posted by guillaume | December 4, 2008 3:48 PM
Posted on December 4, 2008 15:48
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:
IFrameCommTest/bin-debug/IFrameCommTest.html#
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
Thanks
Posted by adrian sule | December 16, 2008 4:57 AM
Posted on December 16, 2008 04:57
Here is the uploaded example:
http://adriansule.com/IFrameCommTest/bin-debug/IFrameCommTest.html#
Posted by Anonymous | December 16, 2008 7:53 AM
Posted on December 16, 2008 07:53
hi
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
kandaraja@gmail.com
Posted by kandasami raja | March 4, 2009 8:19 AM
Posted on March 4, 2009 08:19
I want to show only the movie within the iframe
How can we find movies within the Iframe,
If any suggestions,
Posted by shan | April 17, 2009 5:17 AM
Posted on April 17, 2009 05:17
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.
Posted by Steve Berube | April 20, 2009 11:10 AM
Posted on April 20, 2009 11:10
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
Posted by Mitesh panchal | May 21, 2009 9:27 AM
Posted on May 21, 2009 09:27
Regarding:
> 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?
Posted by stevebossie | June 5, 2009 1:08 PM
Posted on June 5, 2009 13:08
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.
Posted by Brian Deitte | June 6, 2009 9:26 PM
Posted on June 6, 2009 21:26
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.
Posted by Derrick | December 14, 2009 4:34 PM
Posted on December 14, 2009 16:34
This helps me very much
Thanks a lot
Posted by Tanzeem | March 4, 2010 7:42 AM
Posted on March 4, 2010 07:42
is there any way to render html content other than iframe and in flex3?
Posted by kira | April 5, 2010 6:23 AM
Posted on April 5, 2010 06:23
Everyone may want to vote for these issues so Adobe raises its lumbering head to our needs:
http://bugs.adobe.com/jira/browse/SDK-12291
http://bugs.adobe.com/jira/browse/SDK-13740
Posted by ylluminate | August 27, 2010 2:14 PM
Posted on August 27, 2010 14:14
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
Posted by Tahir Alvi | November 5, 2010 1:28 PM
Posted on November 5, 2010 13:28