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?
Posted by Aral Balkan | February 5, 2006 9:39 AM
Posted on February 5, 2006 09:39
Doesn't work on Safari on Mac. Any suggestions?
Paul
Posted by paul | February 5, 2006 12:20 PM
Posted on February 5, 2006 12:20
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.
Posted by Brian Deitte | February 5, 2006 1:49 PM
Posted on February 5, 2006 13:49
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.
Posted by Ben H | February 7, 2006 1:21 AM
Posted on February 7, 2006 01:21
Doesn't seem to work on Firefox 1.5.0.1 on Mac. either. I get anh empty blue page.
Posted by LGrillo | February 7, 2006 12:33 PM
Posted on February 7, 2006 12:33
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.
Posted by Brian Deitte | February 7, 2006 4:43 PM
Posted on February 7, 2006 16:43
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?
Posted by Siva | March 7, 2006 6:06 PM
Posted on March 7, 2006 18:06
I don't see this... what browser/OS are you using?
Posted by Brian Deitte | March 7, 2006 8:51 PM
Posted on March 7, 2006 20:51
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.
Posted by Siva | March 8, 2006 11:21 AM
Posted on March 8, 2006 11:21
Also, I have installed Flash player 8.5.0.212.
Posted by Siva | March 8, 2006 11:23 AM
Posted on March 8, 2006 11:23
One more thing. I have been able to reproduce this problem on several computers.
Posted by Siva | March 8, 2006 11:27 AM
Posted on March 8, 2006 11:27
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.
Posted by Brian Deitte | March 14, 2006 10:56 AM
Posted on March 14, 2006 10:56
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?
Posted by Siva | March 14, 2006 5:20 PM
Posted on March 14, 2006 17:20
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.
Posted by Brian Deitte | March 15, 2006 11:58 PM
Posted on March 15, 2006 23:58
Thanks Brian!
Posted by Siva | March 16, 2006 11:54 AM
Posted on March 16, 2006 11:54
error,
Could not resolve to a component implementation
Posted by a | March 25, 2006 5:08 AM
Posted on March 25, 2006 05:08
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.
Posted by Brian Deitte | March 25, 2006 1:12 PM
Posted on March 25, 2006 13:12
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
Posted by Robi | March 28, 2006 8:49 AM
Posted on March 28, 2006 08:49
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.
Posted by Brian Deitte | April 13, 2006 10:47 AM
Posted on April 13, 2006 10:47
Hi Brian,
Please update for the final release. I have a lot students would love to use for their business apps.
Regards,
Mike
Posted by Mike Kollen | June 28, 2006 3:42 AM
Posted on June 28, 2006 03:42
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.
Posted by lucio | July 5, 2006 11:56 AM
Posted on July 5, 2006 11:56
Hi, there is a more up-to-date version here: https://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.
Posted by Brian | July 5, 2006 11:59 AM
Posted on July 5, 2006 11:59
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? :)
Posted by Omar Gonzalez | November 22, 2006 1:45 PM
Posted on November 22, 2006 13:45
Omar, the latest version is here:
https://deitte.com/archives/2006/08/finally_updated.htm
Posted by Brian Deitte | November 22, 2006 1:50 PM
Posted on November 22, 2006 13:50
Flex Errors when loading file. Please fix and e-mail when it works.
Posted by Brady White | March 22, 2007 4:38 PM
Posted on March 22, 2007 16:38
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.
Posted by Brian Deitte | March 22, 2007 4:43 PM
Posted on March 22, 2007 16:43
i need to embed PDF in flex app,so i google your example,but it throws error.
Posted by dragoonfeng | January 16, 2008 5:11 AM
Posted on January 16, 2008 05:11
using this can we launch java application from flex
Posted by vinod | August 5, 2008 7:28 AM
Posted on August 5, 2008 07:28
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
Posted by Paul Ford | September 3, 2008 12:05 AM
Posted on September 3, 2008 00:05