« Free Flex | Main | Localizing Flex Applications »

Embedding HTML in a Flex application in AS3

An update to this example for the final version of Flex 2 can be found here.

I converted Christophe's solution, Embedding HTML in a Flex application using an IFrame* to AS3. It also now uses ExternalInterface, provides source with a right-click, and has some other minor improvements.

You can try it out here.

You can see the source by right-clicking in the application and selecting "View Source", courtesy of a new Flex Builder feature.

To run it yourself:

1. Install the Flex beta on your machine so that you have the latest player.

2. Get the source to the example.

3. If you are using Flex Builder to edit the source, you'll need to do one thing after creating a project. Go into Properties, then Flex Compiler, and uncheck 'Generate HTML wrapper file'. There is an existing HTML wrapper that shouldn't be overwritten.

4. After modifying the code, copy IFrameDemo.html and IFrameDemo.swf to a webserver and call the html page through the webserver. This is needed in order to not run into a security error. If you do not do this but instead run the html page from the local filesystem, you will get the error "Security sandbox violation: ExternalInterface caller 'file:///IFrameDemo.swf' may not access 'file:///IFrameDemo.html'." I still need to investigate whether this is an expected error.

It's a fairly small application, but there's three TODOs in there, little things that I will look into. I also have a very detailed writeup on my experience of migrating this application. I hope to post this either tomorrow or sometime next weekend.

*whenever I click on a direct link to Christophe's site, I get a server error. It goes away, however, when I reload the page.

Comments (29)

Mucho coolness, Brian -- thanks! :) Worked a charm in FireFox & IE but died on Opera ("The ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.") Any ideas?

paul:

Doesn't work on Safari on Mac. Any suggestions?

Paul

Brian Deitte:

Hi Aral and Paul, the ExternalInterface (aka External API) does have a few places it doesn't work currently. Opera support is supposedly coming:

http://my.opera.com/community/forums/topic.dml?id=103184&page=1

I also see that it is only supported in Safari 1.3 or later:

http://livedocs.macromedia.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001599.html

A solution to this would be to use fscommand as a backup to ExternalInterface when it isn't available, which can be checked with ExternalInterface.available. I did, however, have an issue with using fscommand in this example, if I remember correctly, but I may check this out again.

Ben H:

One issue that I have seen is when the iframe displays a swf file. For instance if you go to yahoo.com and it happens to display a swf add in its page content, and you select to hide the iframe the swf file from yahoo remains on the page while the rest of the page content is hidden. This behavior seems to only show itself when using firefox, it does not happen in IE.

LGrillo:

Doesn't seem to work on Firefox 1.5.0.1 on Mac. either. I get anh empty blue page.

Brian Deitte:

Hi Ben, that's interesting. I don't see this problem with Firefox myself (v1.5.0.1). I haven't gotten a swf on yahoo.com, but I tried it with adobe.com and see everything become hidden.

Hi LGrillo, an empty blue page is not the same issue that others are having with ExternalInterface. Are you sure you have the latest beta version of the player installed in Firefox? You might want to reinstall it to make sure.

Siva:

One problem that I have found is that the iframe disappears behind the flash content when you click inside the iframe and then click on the flash background. The iframe falls behind the flash content. This is quite irritating. Does anyone else experience this? Is there a work-around?

Brian Deitte:

I don't see this... what browser/OS are you using?

Siva:

I'm using Windows XP SP2 with IE. I can reproduce this problem with your example. I have installed Flex 2 Beta 1 with Flash 8.5 Alpha 3. This problem is not present with Chris' original solution. I have compared your code with his and I don't see any significant difference. If you click on the browser window and click outside, the browser window disappears for me. If hide and show the iframe window, the window appears again. If I resize the IE browser window, the iframe appears. I'm not sure what is causing this.

Siva:

Also, I have installed Flash player 8.5.0.212.

Siva:

One more thing. I have been able to reproduce this problem on several computers.

Brian Deitte:

Hi Siva, I was using Firefox on Windows XP SP2 and didn't see the issue. Now that I tried it on IE, I see the issue as well. Very strange. Hmm, not sure what is causing this. I will add this to the list of things that I want to look at with this example. I probably won't get to this for awhile, and may not get to it at all before I leave for a sabbatical. If anybody else sees anything in the code that could be causing this (or more importantly, believes this is is a core Flex or player issue), let me know.

Siva:

Hi Brian,

The only strange thing is that this problem does not occur with Chris's original example. I can run his original example (created in Flex 1.5) and it works. This is the only reason that I suspect that the problem is perhaps in Flex or the Flash player. This is an important issue to our company as w need to be able to use an iframe to display an html report in my Flex project. Since most of our clients will be using IE, this presents a big problem for us. How do I report such problems to Adobe?

Brian Deitte:

Hi Siva,

Generally bugs are submitted through a support contact or on this page:
http://www.macromedia.com/cfusion/mmform/index.cfm?name=wishform
The flexcoders mailing list is also a really good place to get our attention... or by posting on a developer's blog. Because in this case, I just entered a bug. I agree this is a problem we should try to figure out, and I'll try to have this bug come to me for the release.

Siva:

Thanks Brian!

a:

error,
Could not resolve to a component implementation

Brian Deitte:

Hi "a", not sure what the issue is that you are seeing. Note that this post was written for beta 1, not beta 2. So it won't work by default with beta 2. There's only a few changes that should need to be made to the source, however.

Robi:

Hi Siva,
I would suggest you try using div tags instead of iframes & play with the visibility of the layers. I faced a similar issue & using divs solved my problem.

Regards

Brian Deitte:

I figured out that this isn't a bug in Flex but was a problem with IFrameDemo.html. There needs to be a parm setting wmode to opaque. There's two places in the html page where we set params. Add <param name="wmode" value="opaque"> to each and things work fine.

Hi Brian,

Please update for the final release. I have a lot students would love to use for their business apps.

Regards,

Mike

lucio:

Hi, any news about a final solution for this problem? I've tried the different solutions explained (for FLEX 2) but none of them work as the one published for FLEX 1.5.
Thanks in advance for such a needed feature.

Brian:

Hi, there is a more up-to-date version here: http://www.deitte.com/archives/2006/05/update_to_embed.htm
There may be problems with these files in the final release, however. Checking this out is on my short list of things to do on the blog.

Omar Gonzalez:

I tried viewing this example in Safari 2.0.4 and Firefox 2 but I couldn't get passed a Flex error. Was this ever updated for the Flex Builder final release?

Has anyone taken a crack at updating it for Flex2 final release? :)

Flex Errors when loading file. Please fix and e-mail when it works.

Brady, there's bold text at top that says this is not the latest version. And the comment before yours points this out as well.

dragoonfeng:

i need to embed PDF in flex app,so i google your example,but it throws error.

vinod:

using this can we launch java application from flex

Ok, for anyone who has had the "Could not resolve to a component implementation" problem. I finally cracked it after a few hours of work. It makes complete sense now.

As you may or may not know you need the html file that accompanies the mxml file. So for the example on this blog that would be IFrameDemo.html to accompany the IFrameDemo.mxml. Furthermore the IFrame.mxml needs to be within the same namespace as the user IFrameDemo.mxml as this file serves as the component based for what is used in IFrameDemo.mxml.

When creating my own mxml consumer fred.mxml it also needed a copy of IFrameDemo.html renamed to fred.html and don't forget to change the references to the fred.swf and rename other embed tags in this html file. This still did not resolve the issue to my frustration. Finally, there is a line in fred.mxml or IFrameDemo.mxml line 80 I think that references the IFrame tag. This is the line that fails.

The line reads


Now in fred.mxml the same line with all the above changes still does not resolve the issue, but the following did !!!!

Notice the local prefix like <mx:Text. What I think is happening is some kind of namespace pathing problem. the local:IFrame tells the flex compiler to look locally for the iFrame.mxml i.e. the source code implementation of the iFrame tag. This is my assumption, either way prefixing local in front of IFrame should do the trick. Feel free to email me with questions and great work on this site and your book Deitte! Thanks