Deitte.com

Something strange I noticed... when displaying CF generated FlashPaper in the IFrame, you can only click it once before it loses focus and you cannot click it again. So like if you click the scrollbar to see more of the document, the next click won't do anything. However, if you click in the address bar of the browser, you can then click something in the FlashPaper again. Weird.

Maybe I'm just doing something stupid, but when I view your example, everything works fine, however when I try to run it locally, none of the pages are loading in the IFrame. I'm not getting any compile or runtime errors, so I'm at a loss as to what I'm doing wrong. Is anyone else experiencing this? Help...please....

Nick, I've never heard of that problem either. I would suggest loading the FlashPaper via flash.display.Loader if you can. Unless there's a bug with this, loading SWFs through Loader will work better.

Christian, are you viewing IFrameDemo.html, not IFrameDemo.swf? Are you using the debug player and checking flashlog.txt? Did you try different browsers to look for errors?

I'm having the same problem as Christian. I can see the panels and the tree, but the iFrame is blank (just the white background). I have imported the the files into Flex Builder and then copied the bin folder up to a web server and run the html file from there....still no luck. Any ideas?

I just retried things myself, and they work for me. I'm using the command-line compiler however. In Flex Builder, you need to unclick "Generate HTML wrapper file" in the Flex Compiler settings, since there is an existing HTML wrapper. I updated the post to include this information. Try doing this and let me know if it fixes things.

One thing that I'm having trouble with.

I tried the links I need to load, but they apparently cannot include GET variables in the url, as flex builder rejects those saying that the get variables must end with a semi-colon, which is rather bizarre.

I'm pretty new at Flex, so forgive me if I missed something obvious... but I would appreciate any suggestions or input.

This is a great function and I will definitely be using it.

Thor, can you post the line that Flex Builder is complaining about and the error message?

Here's the line:
<IFrame id="iFrame" source="https://domainremoved/viewforum.php?f=307&loginstring=removed&login=1" width="100%" height="100%" />
--------
and here's the error message:
The reference to entity "loginstring" must end with the ';' delimiter.
--------
if it matters, I'm using Flex Builder as a module inside Eclipse.

Thanks again.

Hi Brian,

I have tested this in a couple browsers. It seems like IE6 has a real performance issue.

Do you know why this is?

I had it running in firefox 1.5 and IE6 at the same time.

Rollovers were fast in firefox but, IE6 was like there was internal loops killing it and rollovers made the example unusable.

Ok, I tested it one more time. It's when you load the adobe.com site into the IFrame.

Do you think this has to do with all the content and maybe the comment javascript thing going on?

I guess the rule might be, if you are going to use this, start of with simple html conent, test and move up.

Peace, Mike

Brian, the problem I get when loading it via the loader is scaling on the toolbar. rather than maintaining the same height when I make the loader object larger than the 450 pixels, it stretches, taking up alot of the real estate.

Thor, I think something in your URL needs to be escaped, and the compiler is just giving you a bad error message about this (where it can't find a ";" at the end of a statement). I don't know the exact escaping rules in this case though- try using backslashes in front of ?, & and = or using the XML-escaped characters.

Michael, I don't know why this is a performance issue. I definitely agree that users need to be very careful in testing what they use with this code, as changing wmode to opaque really changes the browser interaction.

Nick, that's too bad. If you can enter a bug on this issue (http://http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform), it has a good chance of being fixed in a later release.

Thanks Brian! Unclicking "Generate HTML wrapper file" in Flex Builder worked. To recap what I did for others: In Flex Builder 2, create new project, in menu item Project...Properties...Flex Compiler uncheck "Generate HTML Wrapper", import (File...Import) the (unzipped) files, it should now automatically compile. Open the html file in the bin folder.

Excellent example. I imported into Flex 2.0 as new project and worked fine. So then I tried to recreate the example in a new project and i get the same as Christian and Mike...in my example I can see the frames but get a blank iframe...I have ensured that there is no difference between my app and the origianl.????

Jenn...make sure that iframedemo.html in the bin folder is not being overwritten when you compile. If you don't uncheck "Generate HTML Wrapper" for the project, it will overwrite everytime you save. Gotta have the changes Brian made to iframedemo.html remain intact.

First and foremost, thanks for making this code available. I've tried to extend it by swapping the panels for tabs (tabnavigator) giving a different iframe for each tab canvas. Problem is, once you go from e.g. tab2 back to tab1, the iframe never toggles back and forth but remains as the tab2 url. Any thoughts?

Hi JB, the code isn't set up to handle more than one iframe. You could try to share the IFrame instance between the tabs. This would probably be the easiest solution.

You could also change the code to handle more than one iframe. It's a little complicated, but I can explain how I'd do it. Change the HTML to have more than one div, named myFrame1, myFrame2, etc. Then change the IFrame functions in the HTML to take a number as an additional parameter, and add this number to the "myFrame" string as needed. In IFrame.mxml, have a static variable that increments when a new IFrame is created and save this variable as an instance variable for each instance. This instance variable then needs to be passed to each HTML function when called via ExternalInterface.

Hello,

Thanks for making this code available. I have some basic questions about how to use it in Flex builder 2.

reading previous posts, I have unchecked the create HTML wrapper so that the HTML code in the wrapper is not over written.

However, I am unclear then on how to go about debugging the rest of application I am building AND continuing to use the modified wrapper.

For example, when I run my main mxml, it tries to run my app in the standalone flash player and it doesn't work.

So the questions is how can I use the modifed HTML wrapper AND use the debugging and runtime tools offered by the Flex builder enviornment?

2nd question- I created my own app using the IFrame. When I run my modified version from the bin folder, the IFrame is loading data (I can see the browser running), but nothing is appearing for the most part. I can see a "flash" of web page data when hightlighting the IFrame, but it doesn't remain.

Thanks for your help with this

Brian T.

Hi Brian,

1. I have never used debugging in Flex Builder for this application, and I'm not sure how to get this to work. I think you can edit the existing HTML files in some subfolder, and it would work if you edited the main HTML file to look like the one provided. You may want to ask about this on flexcoders or the Flex support forum.

2. Make sure the iframe is set to visible and that its coordinates make sense for the page. I'd put some trace statements in IFrame.mxml to check this.

I am still getting the blue screen in FireFox

Hi Brian,
I just downloaded the code and got this error when I wanted to run it:

TypeError: Error #1010: A term is undefined and has no properties.
at mx.styles::StyleManager$/http://www.adobe.com/2006/flex/mx/internal::initProtoChainRoots()[C:\dev\GMC\sdk\frameworks\mx\styles\StyleManager.as:231]
at IFrame/http://www.adobe.com/2006/flex/mx/internal::_IFrame_StylesInit()[C:\dev\IFrame\IFrame.mxml:0]
at IFrame$iinit()[C:\dev\IFrame\IFrame.mxml:0]
[SWF] C:\dev\IFrame\bin\IFrame-debug.swf - 349,903 bytes after decompression

any clue?
thanks in advance.
Diego

Brian, Thank you! This worked perfectly. I tried it on Firefox 1.5, IE6, and Opera9 running on Windows XP with no problem. I do have to hide the IFrame before popping up a dialog box over it, but I think this is unavoidable - unless you have a magic solution for this.

BTW, what I specifically wanted was a way to set the HTML content of the IFrame from within the Flex app. In case anyone else has the same need, this turned out to be an easy extension. I set the source of the IFrame to a blank page containing an empty DIV tag. I added a name="myIFrame" attribute to the generated IFrame in the loadIFrame function in IFrameDemo.html. I added a setIFrameContent function in IFrameDemo.html with a single line: frames['myIFrame'].document.getElementById(id of the DIV tag in the IFrame source page).innerHTML = content to display. And I added a call to this function from IFrame.mxml.

Thanks again! I really appreciate your work on this.

Srini, could you provide more info? Do you see the blue screen in IE, is this with downloaded code or the SWF on the site, etc?

Diego, sorry but I don't know what is causing this. Did you install any of the Flex or Player betas and if so, can you double-check that your version of Flex and Player is the most recent version?

Dallan, you're welcome. I don't have a magic solution to the dialog box issue. Thanks for the HTML content tip!

I just tested the presented example in Mac OS 10.4 with Safari 2.0 installed.

It just does not work under this configuration :(.

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.

Great example. BTW, is it possible to make an actionscript call from within the HTML content to flex components outside the iframe?

Hello guys!!! I am new to Flex. Since I did not get that, I have to ask you the same question that you guys have already answered!!! :-( I am having the same problem as others and cannot see the web pages even though I do not get any error message. I can only see the left tree panel and the right "EMPTY" browser panel. I got that I need to uncheck the create HTML wrapper but where is the check box?? I cannot find that!! I am using a Flex builder 2.0, so when I start a new project it just lets me enter a new project name and I was expecting that check button some where there but could not find that!! Please help me to locate the check box. Once more thing where do I put the included JavaScript code? Thakns in advance for all the help and time!! Regards...........

I found the "Generate HTML Wrapper" radio button and unchecked it. But now as I am trying to run the application I am getting the following error message!!!!!!!!!

Error: 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 help will be highly appreciated..

Jabby, sorry to hear that. This is most likely a problem with the browser or the Flash Player. If it's the latter, the player team would love to know about it. Can you send a note on this to the wish form?
http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

boybles, do you mean to ask if it's possible to make a *JavaScript* call from within the HTML content? I think that should still work with the Flex-AJAX Bridge:
http://labs.adobe.com/wiki/index.php/Flex_Framework:FABridge

Kazi, what browser are you using? Try to use the latest version of Firefox, Opera, or IE.

Thanks Brian. I will try with latest browser and will inform ASAP. Thanks again!!!

Hi Brian. IT IS WORKING!!!! I owe you big time!!!
Thanks a lot!!! I have one more question- since
embedding HTML is just one part of the interface
that I am working on, I need to know why you
specifically require us to use your html code not
the one that is generated by the FLEX builder.
In your case you embedded html page in a panel but
I want to put mine on a floating window!!! The
kind of window that we create for warning message.
Is that possible? Thanks again.

I just verified what JabbyPanda reported -- that the iframe solution exhibits some strange behavior on an iMac running the latest version of OS X and Safari. I don't see a flicker (I have very simple content though), 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. I'm going to report it on the URL that you suggest.

kazi, I'm not sure what you mean by "html page in a panel". The Flex code has a panel, but I don't see this in the HTML. You can change the Flex code to look however you want. You do need to use the given HTML code, but you could use your own as well, as long as you add the same changes that are mentioned at the top of the HTML file.

Dallan, sorry to hear that. Thanks for reporting it, as that's the best way to get this fixed.

Thanks Brian. Please take a look at the bottom code. I have 2 view stacks - one with two links buttons and the other with IFrame and (it is just a graph that I created in a separate file).
Now the problem is that as I press those 2 buttons the second view stack should pick a child accordingly. But the IFrame never show up!!! I
tried to put the IFrame as the first child of viewstack. That way the IFrame comes but it does not let me change to any other child of the viewstack. Any suggestion?

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="iFrame.visible=true" viewSourceURL="srcview/index.html">

<mx:ViewStack id="BView" x="218" y="10" width="830">
<mx:Canvas id="B1" x="218" y="10" width="830" height="200" borderColor="#ff8080" borderStyle="solid">
<mx:LinkButton x="10" y="154" label="Graph" click="myvs.selectedChild=one;"/>
<mx:LinkButton x="59" y="154" label="Blog" click="myvs.selectedChild=two;"/>
</mx:Canvas>
</mx:ViewStack>

<mx:ViewStack id="myvs" x="218" y="218" borderStyle="solid" width="830" height="785" >
<mx:Canvas id="one" width="100%" height="100%">
<line/>

</mx:Canvas>
<mx:Canvas id="two" width="100%" height="100%">
<IFrame id="iFrame" source="http://www.sisigma.com/kmf/" width="100%" height="100%" />
</mx:Canvas>
</mx:ViewStack>

</mx:Application>

Sorry, I was trying to paste my flex code but looks like it does not show up!!

kazi, no problem, as I fixed it with some lt and gt escapes. Unfortunately, I don't know what this issue is and can't find the time to debug it at the moment. If anybody else can solve this or if you find a solution, please post it here. Or I'll try to take a look later.

Thanks Brian!!

I tried your nice tool in a TabNaviagator and the url page appears at the bottom of the page where the tag is... not the at the .

Should this work in nested tags like this: TabNaviagator--> VBox-->Canvas-->IFrame

Thanks

The div "myFrame" was positioned incorrectly in Firefox (though it was positioned ok in IE6). To get it to work, I had to change these lines in the moveIFrame JavaScript function:

frameRef.style.left=x + "px";
frameRef.style.top=y + "px";

Jamie -

I made the changes in Javascript function moveIFrame with the same results.

Do you still have the div tag at the bottom. I'm using Firefox also

Ok I got this working on Firefox with Tabs.

I had to add the following:

1.) To the div tag for the IFrame I had to add to the style declaration top:0px,left:0px.
2.) To the moveIFrame Javascript I added frameRef.style.position="absolute"
3.) For tabs I created a listener for when an iFrame tab was selected I would make an ExternalInterface.call("ShowIFrame") or HideIFrame for non-IFrame tab.

4.) For IE I had to modify the loadIFrame(url) Javascript function to include the width/height when initializing the innerHTML ... otherwise in IE the IFrame was the wrong size (smaller). This was not required in FireFox

Hi, i have the same problem like Srini: I get this errormessage when i compile ur code!

TypeError: Error #1010: Ein Begriff ist nicht definiert und hat keine Eigenschaften.
at mx.styles::StyleManager$/http://www.adobe.com/2006/flex/mx/internal::initProtoChainRoots()
at IFrame/http://www.adobe.com/2006/flex/mx/internal::_IFrame_StylesInit()
at IFrame$iinit()

I get the normal blue/cyan background in my browser. I've tried it with IE, Opera and Firefox. Always the same error.

I use Flex 2.0 with Flexbuilder.

How can i solve this problem?

Just fyi, I downloaded your code and it compiled right up, and is working perfect on my dev box. Thanks for the example, this is exactly what I needed! I am building a sweet web based document imaging system, and I needed the iFrame to embed alternatiff into my flex app. Works perfect for tiff image viewing from Flex, and looks sweet! Thanks a ton.

Chris

Matze, sorry but I don't know what is that causing that error. If anybody finds a solution to this issue, please leave a comment.

Chris, glad it was helpful.

Hello Brian need a different type of help!!! Suppose in my web I put 2 buttons titled "flex 2", "eclipse" . Now : what I want is- by clicking the "flex 2" button I will be able to start flex 2 builder and by clicking "eclipse" button I will be able to start "eclipse" IDE. I tried it with navigateURL() but it did not work. Basically what I want is my site's visitors will be start their Flex builder 2 or any other application from the button provided in the web site (All the users will be required to installed those application to a directory that is predefined). All your help is always greatly appreciated.

Thank you for the code.

I've gotten mine to work wonderfully, but I am having a problem that I hope someone can help me with. Instead of using an IFRAME, I changed my code to create a DIV on the underlying page so all I have to do is pass the HTML string to display.

This works great, but I have mine in a TabNavigator control and whenever I add new tabs or change tabs, the DIV still shows on top. I know that I need to hide the DIV when moving between tabs, but I can't figure out what events are fired when switching between tabs. I know there has to be some event that is fired so that I could show/hide the div. Can anyone help?

Brian,

Thank you so much for your example. It compiled and ran perfectly for me. You saved me many hours of trying to convert Christophe's code from one new (to me) language to another.

One question, though. Is there any way to call and get data from a javascript function inside the IFrame? The page inside the IFrame I'm loading has some Javascript I need to communicate with in my Flex App.

Thanks so much for all your work on this thread.

kazi, I don't think there is a way to do this if navigateToUrl doesn't work.

Mario, sorry but don't know this.

David, does normal ExternalInterface calls work? See the IFrame class for an example.

It turns out that you can use ExternalInterface() to call JavaScript functions in the parent page of the Flex App, which can in turn call Javascript in the IFrame as you normally would with an embedded IFrame.

This works because in this example, the IFrame is an element of the parent page and not strictly an element of the Flex App, in my understanding. I do not know if it is possible to call JavaScript functions in the IFrame directly through ExternalInterface, but for my needs, that workaround was sufficient.

Thanks again for your help.

brian,

i'm trying to use this in a TitleWindow that's "popped up" in the main app. it "works" in IE but the iframe doesn't move when the user moves the title window. in ff, it doesn't "work"--i can see the content briefly flash in the TitleWindow but it's either moved/hidden/or resized to 0.

any ideas?

thanks.

PaulH, sorry but I'm not sure why this doesn't work. I assume this is a problem with wmode but I haven't heard of it before. I'd try to see if using a different component than TitleWindow affects things and also try to ask on flexcoders, where a lot of people have used the IFrame trick.

Hey great example! However, I do have some problems. I did the unwrapping of the html wrapper and it worked beautifully with any url path that I gave it. Now, I tried to do the same to my other app and I get a blank IFrame. Even when I remove the html wrapper it doesn't work and all my xml to http calls are not reading. Any suggestions on how I can get the IFrame to work inside another app instead of the one you created?

Sal, thanks. I'm not sure what you mean by "unwrapping of the html wrapper". You need the HTML wrapper in some form for this example to work. If you don't want to use the existing HTML wrapper, you can add the needed pages to your own HTML page, as explained in IFrameDemo.html:

Most of this file is HTML/JavaScript that was generated by Flex Builder. The pieces added:

1. wmode set to opaque
2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods
3. the 'myFrame' div

I also commented out the history feature, but I think it could be integrated into this page.

So, the first time I ran the IFrameDemo everything worked fine, but now I just get a blank screen in the right IFrame. I have followed all instructions exactly. I'm using Firefox on OSX 10.4.8, just thought I'd chime in, cause this is great if I can get it to work properly. Any ideas??

Luke

Luke, so you're seeing the site details on the left but no HTML on the right? That's strange. I'd try everything in a different browser, just to make sure it's not something funny going on with the Flash Player (especially ExternalInterface) or the browser. Let me know how it goes.

Brian,

Thank you for this wonderful code, it is exactly what we needed.

My first issue was that I was loading the IFrameDemo.html from them main project folder and not the one in the bin folder, once I figured that out, I was able to embed my own html pages in the IFrame and it worked mostly.

I am on a Mac, and the html pages that are embedded have some issues. Specifically, parts of the page will not load properly, regardless if the page is on my local machine, or a page on the net like Google. As I mouse over areas of the page, such as images or links, they appear, but the pages seem to have a very tough time loading fully at the beginning. I will test this on a PC and see if the problems persist, it may be a Mac issue.

I have tried this on Safari and Firefox 1.5

Thanks
Luke

Hello,

Thank you so much for your code. I'm going to use it in a future project. My question is... how can I have the iFrame refresh each time a new URL is loaded. My problem is that I'm using this to embed .m4v files onto a page and when using IE when changing URLs the movies keep playing (although you've navigated off of them. Let me know if there is an easy way to have the page refresh each time it loads a URL.

Thanks,

Sam

For some reason I keep getting the error thrown when this piece of code is performed. How is this happening. I am using the sam exact code I down loaded from here. What am I doing wrong????

public function set source(source: String): void
{
if (source)
{

if (! ExternalInterface.available)
{
throw new Error("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.");
}
__source = source;
ExternalInterface.call("loadIFrame", source);
moveIFrame();
}
}

Luke, did this turn out to be a Mac issue? I'm sure other would be interested to hear what your OS and browser was when you saw this.

Sam, sorry but I haven't seen or heard of this issue. I've always seen refreshed HTML content.

joe, did you read the error message? What browser are you using?

Thank you very much for your job!!! Great job! I had a little problem with disappearance of DIV after clicking on flex app, but it was fixed by wmode="opaque".

Hello Brian. I try to run the example with Flex Data Service but didn't work.
I notice that you updated the post saying must quit the compile option "Generate HTML wrapper".
How can i do this with Flex Data Service?

Juan, are you talking about using the webapp compiler in data services? There should be a way to override the default HTML wrapper when using this, but I'm not sure where it is. Someone else here or on flexcoders should be able to answer that.

A comment for searchers: if you're looking for more information on "TypeError: Error #1010: A term is undefined and has no properties.", look here:

https://deitte.com/archives/2007/02/error_1010_a_te.htm

Hi,

Thanks a lot for the code Deitte. I could run your demo perfectly but i got problems when applying it into my project. I created IFrame as a Flex component. And in my main application I inserted an IFrame inside a Canvas which in turn a component of TabNavigator. The IFrame display the page OK in the first load, but after I click on somewhere outside the IFrame, the page just disappeared and never went back. I already added the wmode="opaque" into my html code. Anyone know what cause this problem? Thanks

I have the same problem as Nick Hoang just above. Any ideas what causes this?

Hi
i´m trying to integrate you solution with FCKEditor.

everything works.. except sometimes the keyboard will be locked to the FCKEditor, my focus will be ignored.

any ideias?

ps: great work, you should put this project in sourceforge!

Nick and xmark, are either of you running OS X? There seems to be an issue related to this, as noted in an earlier comment. If it's not that, sorry, but I have no idea what is causing this. If you figure it out, please let me know.

Fabio, thanks! I only converted the code, didn't write the original, so I don't plan to move the code anywhere. No idea on your issue either, sorry. You can always try to reset the focus on the Flash or HTML side programmatically.

Hi,

I would like to make the iframe uncopyable so no one can copy any text from the webpage the iframe is showing. Is there anyway ? thank you.

Mashuq

Mashuq, you'd have to do this with Javascript contained in the HTML page (if there is a way to do this with Javascript), as Flash has no control over that part of the page.

Brian

First I will say good job. I follow many flex coders and you pulled out some good stuff here

I have been struggling with this code for some time now. I'm on a Mac and do not seem to experience any problems others have. And eveything works fine with the example...., until I try to make the Iframe a smaller size. As in not 100%. My example is I want to throw an ad banner in the application that will invoke some php. When I call the html with the code aligned to the top left corner the image shows up and works. But as soon a I change the size of anything past 100% the div tag dosnt seem to move with the browser window.So the iframe stays in one location on the browser apose to moveing with the flex application. Can you help PLEASE. I'm pulling my hair out?

John, thanks. Sorry, not sure what the issue is here.

Hello Again,

Thanks for the this great code. I am using this code in my website to show few pages. Its working fine. But I want one more help- I would like to make sure that those webpages I am showing in the iframe doesn't open anywhere else- i.e. I dont want them to be opened by directly typing their url. I want them to open only in the iframe. Is there any way to do that ?

Thanks.

Mashuq, there's really no way to do that, as the URLs are loaded by the browser.

Thanks for this Brian, one small issue I have that you may be able to help with is when I navigate to another level in the stack after viewing the iframe, the ifrane remains on top unless I uncheck the IFrame visible checkbox.

Mike, the iframe doesn't really work as part of the Flex application, as it's an HTML layer. So it won't obey the Flex rules for being visible or not without manual work. In this case, you'll need to manually tell the iframe to be visible or unvisible via an event or a binding.

Hi!Brian,can this work inside other flex application??I'm using the cube effect found in Distortion Effects in FlexBox,and my idea is when i press a certain button the cube rotates and a web page opens on your iframe,is that possible??Sorry for the noob question!
Thanks

Brian, I am getting the

xternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.
at IFrame/set source()
at mx.core::Container/createComponentFromDescriptor()

This happened after i unchecked the HTML Wrapper in project settings. Before this I got the blank IFrame. I am trying to launch from FlexBuilder.

Hi,
We are using iFrame( without scrollbar) to display static webpage in our application.

The height of iFrame is almost same as the application. So we need to scroll up & down to see the entire content of iFrame.

Now the problem is when we try to scroll down using application scroll bar, iFrame covers the horizoanl(bottom) scroll bar of application.

So basically iFrame content overlaps the horizontal scrollbar so we can only see the iframe content laying on the scrollbar area.

Hi,

I am using the Iframe flex example code in my application. I am using 2 Tree links. One link to open a html generated by other Flex application and secondlink to open external html(which has some script within it).
Everything works fine in firefox, all the tree links open pages in iframe. I am having issues with IE, the second link does not open the external html page but the first tree link works fine. I do not get any error. So am ot able figure out what is the problem. Can anyone suggest any solution this kind of issue ? Appreciate your help...

Hi,

Very nice trick.
Do you know how can I avoid the page redirection when navigating through the page loaded in this component?

For example, when I make some search in the page of Yahoo!( loaded by the component), when the results come to me, the result page, that was generated dynamically, replace the page that was hosting the flex application. There is a way to avoid this?

Thanks.

Hi,

Ihave swf file which contains a base page and an iFrame.
The base page is large enough so that it needs a horizontal scroll bar.

Now when we sroll vertcally on the base page,it is seen that the content of the iFrame overlaps the horizontal scroll bar and and the part of the scroll bar under the iFrame gets hidden.
We have been trying to fix the problem,but with no results so far.

Any help in this space will be highly appreciated.

Is there anyway to display local HTML files in an IFrame without having the Flex App displayed in a browser? Can an Apollo app display HTML?

Here's a big reply to all the questions I haven't answered in the last month.

Jota, it can be used in any Flex application with some customization. You'll need to include some code in your HTML wrapper, which is explained in IFrameDemo.html, and you'll have to include the IFrame.mxml in the right spot, as shown in IFrameDemo.mxml

Andy, I assume you aren't using one of the browsers mentioned in the error message? That's to be expected in that case, no matter where it is being launched from.

Parag, it sounds like you just need to change the height of the IFrame (which is a Canvas) that you've created in MXML or ActionScript.

BR, not sure, haven't heard of this problem before. Do the links work in a simpler iframe example?

Giancario, it wouldn't be something you can do in Flex. But perhaps there's way to do this in Javascript, in the HTML wrapper?

koushik, I'm guessing that you work with Parag? To be more concrete in the fix I already suggested, if you haven't tried changing the height of the IFrame, I would do this. Set it to 95% and the horizontal bar should show again.

Gerald, Apollo is great at displaying HTML, and you can even manipulate the HTML from ActionScript.

Brain,

Yes the links work peoperly in Example. One interesting point is the my code works perfectly in Firefox. The second link which i am trying to open is in Iframe a html page with google map code in it. Both the links i am trying to open using path relative to the bin path. i.e like this (../mapHtml/mapPage.html).This works fine in Firefox, but not in IE, I do not see any error also. Do u have any idea? Appreciate your help on this.

Thanks
BR

BR, odd, no I haven't seen that before. If I had to take a wild guess on it, I would guess that it's a silent security problem. I would try it on the local file system if you haven't or all running from a web server if you haven't. I'd also run something like ServiceCapture to see if the HTML page is requested or if anything else funny is going on.

Brian,

Thanks a lot for your suggestion. I ran the code in the server, it worked fine in IE also. Now when i tried to get to the solution of my requirement, I have a problem again in IE. My req is : I have a flex page with few controls like combo box, datagrid etc and a iframe with 2 buttons. I want to toggle between the page with controls & iframe (which opens a html page with goggle map code in it) via the buttons. i.e i am hiding the iframe while displaying other controls and hiding controls while displaying iframe. Now the issue is when i run it in IE, while toggling back to the page with controls from Iframe the controls appear to be disabled. I am running the code in server.But this works in firefox(in local & server). Appreciate your help on this. Thanks Again....

BR, make sure you have wmode set to "opaque" in the HTML, as I've heard of this causing disappearing problems. Other than that, sorry, but I don't know what the issue would be.

it just can't work for me.

is shows nothing. i need a help here.

Brian

Thanks for your help. I fixed the problem. It was because of wmode param. I had this wmode param set to "opaque" in my html. This does not work in IE but it is required for other browsers. So i changed the code in html to handle the browser type and set accordingly for non IE browsers. It worked fine. Appreciate your help.

is there anyone who can mail me a working example with all included which will work? im stumbling with it and cant get it to work keep getting this exception:

Error: 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.
at IFrame/set source()
at mx.core::Container/createComponentFromDescriptor()...

any help will be appreciated.

I am getting the same error as Stefan.

It seems to have happened when I installed Flex3 beta.

Any suggestions?

Thanks

Here is the error message I get and I'm using IE 6:

Error: 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.
at IFrame/set source()

I want to show a web-page inside my Flash Application.

But my flash application itself is not opened via a browser, it is a standalone flash application - so i do not have any html wrapper kind of thing.

How can we get this to work in this scenario?

it is a brillance for me ..
but i want to know
can i run it in mxml instead of html

which mean
i want mxml can embed my iexplore in it ..

thank ..

Does this work with Flex3 beta? I can't seem to get it work thou..

Thanks. Finally got it to work. The extra styles are not needed, but it took me forever to discover a type I made in the HTML file.
Also, quite annoying that you can't specify in Flex Builder that the "run" should be "start a custom html" instead of "show the new swf". Also quite annoying: when there's an error in an AS file (I use one) than Flex Builder won't go to that error when you have the MXML-file open.

BTW My weblog does not show the use of this IFrame component (it was an earlier Flex try-out).

This component works fine on IE. But using "wmode=opaque" on Firefox(Win)leads to trouble like not working mousewheel and not accepting of special characters like "@" of flex2 textinput component. I get always a q for an @. Do you have any suggestions?

nD, not sure what to tell you with the given information. What exactly happens?

BR, you're welcome. And thanks for posting back, as I'm sure others have run into this.

Stefan and Kenneth, that's interesting. Has anybody heard back from Adobe on this? Can someone post a bug on bugs.adobe.com/flex if you haven't already?

Rojer, that won't work with the Flash player. You should definitely use AIR for this.

ben lam, sorry but I didn't understand the question.

SwitchBL8, good to hear. I'd suggest adding your annoyances to bugs.adobe.com/flex

Helge, I don't know any workarounds for the opaque issues, which I've heard of as well. It's a browser issue, as far as I know.

Hi,
I am having problem displaying content of the iFrame in Firefox 2.0.0.6 on winXP. I can only see the content when i resize the firefox window, but it works ok in IE.

can anyone help?

thanks

Jeff

Hi, I'm using IE6 and WinXP, this combination should support NPRumtime, but still I got the error about to get latest version of browser which supports NPRumtime. Please help on this. Thanks so much.

Hello Brian,

I have been using your code for a while now. I wanted the original component to be more encapsulated so I have created a modified version.

You can download the code from the demo:

http://ccgi.arutherford.plus.com/website/flex/iframe/HTMLTest/

On my website I have written a little about this:

www.netthreads.co.uk.

All the best
Alistair.

hi,
i wanna to bind combo box by database in integrating it to asp.net pages i have done for datagrid by the property datafield is there is any other property that i will bind my data by other controls
thanx
plllz answer it

Great! Many, many thanks. After two days of nearly getting crazy because viewing web pages in flex just would not work (or at least not as intended) I finally found this just when I was about to give it up for now. This is thonly solution I found that really works. Cool stuff.

I'm now making some Flex apps to edit HTML page contents.

The core idea is to get variable inside HTML tags ( like H1, DIV ) into Flex, and edit with Flex RichTextEditor.

Is it possible to get typical variables in HTML?

Thank you.

Jeff, not sure, but let me know if you figure this out.

Vivi, this isn't something that's controlled by the example. Perhaps a version of the Flash Player has a problem?

Alistair, I've already emailed you and blogged about it, but just added another comment here- looks great!

bhaskar, if you'd like general Flex quetions answered, check out flexcoders.

Kerstin, you're welcome!

toomo, you can't edit the HTML tags directly in Flex (unless you are using AIR), but you could add Javascript code which alters the HTML tags, of course, and this Javascript code can be called with ExternalInterface.

Hi Brian & the community,

I love the IFrame approach you come up with. I would like to know if there is a way to stretch the IFrame so that the user can use the browser scrollbars instead of the IFrame scrollbars.

Thanks a lot and thanks again for your help!

Helge, I was able to get a workaround for the problem of wmode=opaque disabling MouseWheel in Firefox. I used the javascript solution that Ali Rantakari created for getting MouseWheel support on Mac OS X. What I did was just comment out the condition statement in his osxmousewheel.js file that made the solution only work for Macs. Here is that line:

// if (navigator.userAgent.indexOf('Mac') != -1)

Ali Rantakari's solution is here:

http://hasseg.org/blog/?p=3

Hello, first of all thanks for your sharing!

A little question, There is an issue to make a snapshot from the flex app on iFrame?
Rajiv.

We are currently working on a Flex application for consuming all types of media – a next-generation media consumption platform. We launch in January and urgently require a fix. The issue we are experiencing is as follows: We need iFrame components for 1.) playing YouTube videos, 2.) displaying some html text and 3.) integrating Google AdSense. In order to display iFrame in front of application, we need to set up "wmode" parameter, "opaque" as value in html source code, but we get a long list of troubles when we set "wmode" parameter for our application.

1. Transition performance issues: the Transitions become very slow, and not very smooth

2. Mouse scrolling function is frozen on Firefox: Using the middle wheel on a mouse is disabled…the page doesn't move up or down. When we do scroll by dragging the scroll bar, video does not scroll smoothly with application and sometimes stops in wrong place.

3. When flex popup window is displayed (video, html text) the iFrame is still displayed in front of the flex popup. This means that some action buttons on the flex popups cannot be clicked.

4. When we play YouTube video in iFrame, the cursor can’t focus on any input boxes (i.e. search box). We need to click on url box to reset focus and then we can type in input box…a Firefox issue.

All of these problems are coming from the "wmode" we set up in html source code.

If anyone can please provide some assistance or suggestions, it would be greatly appreciated. We would even consider financial reward for a solution to these issues.

Abdel, thanks. I would look at the CSS/positioning for the div in the HTML, and see if you can come up with a way to use the browser scrollbars.

Jamie, thanks for your help!

Rajiv, thanks for the comment. Sorry, but I don't know what the snapshot issue is.

Ben, the iframe solution is most definitely not perfect. I've heard of more problems than I can count, as you can see in the comments above. And I haven't heard of anyone who has a solution not involving wmode, other than using AIR, so I don't know what to suggest here. I would make sure to check with Alistair (Update 3 above) to see if he knows anything.

Ah, and since I was curious on this Ben, I see that you've found out more info elsewhere:

http://www.judahfrangipane.com/blog/?p=164

Hi,

I've been reading this wonderful thread and am currently implementing this iFrame in my Flex app. However, I would like to know if there was a way for the Flex app to call a javascript function in the html that is the source of the iFrame? All of the Flex->Javascript examples I've seen have the javascript in the wrapper html. Any suggestions would be appreciated. Thanks.

-Larry

I find that when i maximize the IE window, the iframe does not reposition itself correctly within the panel. How do i overcome this?

Larry, that's an interesting question. I don't know a built-in way, but is there a way in JS usually for one embedded page to talk to another one? If so, then you could set up some sort of proxy call.

Chris, I haven't heard of this issue before. Is it slightly off or greatly off? Have you tried playing with the HTML code for the iframe?

Nice Job Brian. This has allowed me to kill to birds with one stone. I was using navigateToUrl and loosing cookies and having to deal with popup blockers incorrectly re-loading my pages. Then, I figured out how to use this. However, in ie after I open and close an IFrame component (that I finagled into a TitleWindow) I can't type any characters into any of my text boxes in my flex app. My cursor allows me to click on a text box and bring focus to it, but when I type, it does nothing. Again, I don't have this issue in firefox. Any Ideas? is there a different way to set focus for each browser in the javascript?

Well, I can't even seem to compile the bugger, 'cause I cannot import it into Flex Builder 2 as it is not a project.

How do I get the IFrameDemo.mxml into Flex Builder 2 and compiled? I can open the file just fine, but with a warning that this is not a project (I know that), but when trying to import it as a project the Finish button never hilites, as it's probably missing some mandatory project files.

I get this error after creating new project and manually replacing files:

throw new Error("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.");

The sucker opens the Flash Player (which then hangs) and not a browser?

I get all sorts of sandbox violations in firefox, and have read the article on the subject (event the PDF on the subject that adobe links to), but I'm still not sure what to do EXATLY. Can someone tell me E X A C T L Y what to do where and how to get this to work? I can make the thing compile and run in IE, though i get NO CONTENT in the IFRAME. But for starters I'll be happy just to get it running without errors in FireFox. DO NOT ASSUME I KNOW ANYTHING UP FRONT.

I can get absolutely NOTHING to show up in the IFRAME? Even setting the source directly ... any hints, anyone?

Shane P, glad it helped. That's odd, haven't heard that one before. I know that Buzzword has dealt a lot with focus issues, but I don't know their solutions, sorry.

To Anonymous above: don't create five comments within two hours (which I merged into one) or type in all caps. It's bad form. I'm going to skip trying to answer this one myself.

this has helped me heaps. 1 issue I came across is that the iframe stays statically positioned when you scroll.

A rough fix is to handle the applications or the iframes container scroll event as follows:

private function setIframeScroll(e:ScrollEvent):void {
if (e.direction == "vertical") iFrame.y -= (e.delta / 30);
if(e.direction == "horizontal") iFrame.x -= (e.delta/30);
}

dividing delta by 30 so far seems the closest match in getting the iframe to keep up with the rest of the apps elements. you can probably play around with it a bit to get a better result.

hope that helps.

hi,

im using drag and drop on the canvas container.

when the canvas is moved, the iframe gets left behind - including obscuring other content.

is there a way around this?

Hi,

Here when I run the code through FlexBuider it does not work. I unclicked "Generate HTML wrapper file" in the Flex Compiler settings before publishing, since there is an existing HTML wrapper but still it throws a runtime error:

TypeError: Error #1006: getInstance is not a function.

at mx.core::Singleton$/getInstance()

at mx.styles::StyleManager$cinit()

at global$init()

at IFrame/http://www.adobe.com/2006/flex/mx/internal::_IFrame_StylesInit()

at IFrame$iinit()

I also get an Error:

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

at IFrame/set source()

at mx.core::Container/createComponentFromDescriptor()

at mx.core::Container/createComponentsFromDescriptors()

at mx.containers::Panel/createComponentsFromDescriptors()

at mx.core::Container/mx.core:Container::createChildren()

at mx.containers::Panel/mx.containers:Panel::createChildren()

at mx.core::UIComponent/initialize()

at mx.core::Container/initialize()

at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()

at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()

at mx.core::Container/addChildAt()

at mx.core::Container/addChild()

at mx.core::Container/createComponentFromDescriptor()

at mx.core::Container/createComponentsFromDescriptors()

at mx.core::Container/mx.core:Container::createChildren()

at mx.core::UIComponent/initialize()

at mx.core::Container/initialize()

at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()

at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()

at mx.core::Container/addChildAt()

at mx.core::Container/addChild()

at mx.core::Container/createComponentFromDescriptor()

at mx.core::Container/createComponentsFromDescriptors()

at mx.core::Container/mx.core:Container::createChildren()

at mx.core::UIComponent/initialize()

at mx.core::Container/initialize()

at mx.core::Application/initialize()

at IFrameTesting/initialize()

at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded()

at mx.managers::SystemManager/::initializeTopLevelWindow()

at mx.managers::SystemManager/::docFrameHandler()

When I run it directly.

I need to basically call an HTML in a Flex PopUP .This html contains Microsoft Excel embedded.

I am able to call this in a separate window.But need it in a pop up now.

Any idea?

Hello everybody. I have used the IFrame example. i unchecked the HTMLWrapper but still I cant get corresponding page in the frame. Please let me know what shall i do. /iam using flex builder 3

I can't make it work in Flex 3 either. :-(

I know why. Never mind. I thought the swf file itself can do the work, but looks like I need the javascript. Too bad.

Hi,
I found your component very useful.It worked for my scenerio.But one problrm I am facing here is when I have an IFrame in a PopUp(TitleWindow) and I drag the PopUp,the IFrame remains static and des not move along with the PopUP though it is theh child of the PopUp.Please provide some help!

Thanks and REgards,
Leena Jain

Hi Brian,

Indeed thanks for this post. It really helped me forward with displaying HTML in Flex.

I also encountered the issue on the iFrame not being moved in a TitleWindow. The reason, as far as I can see, is that the move event is not propagated somehow over the children in a container.

However, you can subscribe on the move event of the TitleWindow (or other component that you want to popup) and use that as a trigger to move the iFrame.

Hi Brian,

Why dont load local html with IE7?

Tks!

Dinesh, thanks for the solution! I haven't added it to the source (just haven't done anything with the source in a long time), but hopefully others see it and see it for scrolling.

david, there's a solution in the comment right above yours.

Leena, the first error is in a framework class and so I'm guessing it's a setup issue and nothing about these classes. The second error has info about the issue- I assume you're not using a browser but rather viewing this in the standalone Flash player?

Purnima, not sure what's going on here. You could also try out the example given in one of the links in the "Updates" above. One of them doesn't use custom HTML.

Shawn, see the info above for Purnima.

Leena Jain, there's a couple of solutions for scrolling and dragging in the comments of this post, and one them should work for you.

Franck, thanks for the info.

Ronaldo, I'm not sure what you're talking about.

Hello Brian, I used your example IFrame Demo in my application flex and I thank you for that. But now, and if it is possible, I will like to recover the coordinates of the mouse when it is in IFrame, and thus in page HTML. I do not know large thing with Javascript and I tested several solutions of the Net but without much success. Did somebody already solve this problem. Thank you.

For information I use Firefox 2.0 and Flex Builder 3.

I use this example to create a dashboard application. All work very well until i have tried it into firefox. while i drag & drop an iframe in firefox , it appears and disappers many times. Afeter drag & drop operation the iframe i very Unstable how i can fix this bug? If i try it in safari alla work very well.

this is the code of my personal library.
During drag & drop i call many times moveIframe.

function moveIFrame(name,x,y,w,h) {
var frameRef=document.getElementById(name + "div");
frameRef.style.left=x;
frameRef.style.top=y;
var iFrameRef=document.getElementById(name);
iFrameRef.width=w ;
iFrameRef.height=h;
}

function finddiv(id){
for (i=0;i";
if (document.getElementById(name + "div") == null){

var ddiv = document.createElement('div');
ddiv.setAttribute('id', name + 'div');
ddiv.setAttribute('style','position:absolute;background-color:transparent;border:0px;visibility:hidden;');



document.body.appendChild(ddiv);

var iiff = document.createElement('iframe');
iiff.setAttribute('id', name);
iiff.setAttribute('frameborder', '0');
iiff.setAttribute('src', url);
document.getElementById(name + "div").appendChild(iiff);


}

}

function updateIFrame(name,url){

if (document.getElementById(name + "div") != null){
var ff = document.getElementById(name);
ff.src = url;
ff.reload();
}

}

function bringfrontIFrame(name){

if (document.getElementById(name + "div") != null){
var ff = document.getElementById(name + "div");
ff.style.zIndex = 5000;

}

}

function sendbackIFrame(name){

if (document.getElementById(name + "div") != null){
var ff = document.getElementById(name + "div");
ff.style.zIndex = 0;

}

Display Problem when You Zoom the Browser!

The display of IFrame will get messed up when you change the zoom from default 100% to any other value, no matter in IE or in FireFox.

Is there any way to fix this problem?

Thanks!

This is a very neat idea!!! Thanks a lot.

Hi!

first of all, this code is very helpfull to me, thanks!

However, I'm facing a weird issue :

I developed a Flex application which makes it possible to load HTML reports from a Microsoft Report Server into an IFrame. This works like this :

I have a view which contains a combobox with all available reports. The user selects a report from this combobox, and if this report need extra parameters, the user has the possibility to fill in those parameters. after this, the user clicks the "view report" button, which will take the user to a new view and shows the selected report in the iFrame. from here, the user can choose to navigate back to the previous screen and do the same actions again.

However, when I use reports with parameters, than the iframe doesn't update immediately.

the first time showing a report with parameters, the URL might look like this :

http://projectv10.e-id.lan/reportserver?/Report/E-id/HoldingReport&rs:Command=Render&rs:Format=HTML4.0&rc:Toolbar=False&holding=1

where holding=1 is the added parameter from the user. this works perfectly, and the iframe shows exactly what he is meant to show. then, I go back to the previous view, choose the same report but instead of holding=1, I choose for the parameters holding=2, so the url is :

http://projectv10.e-id.lan/reportserver?/Report/E-id/HoldingReport&rs:Command=Render&rs:Format=HTML4.0&rc:Toolbar=False&holding=2

BUT, when I click the view reports button, my iFrame shows the old report! with holding=1 thus ! and it gets weirder, because if I trace the iframe.source, it says : "http://projectv10.e-id.lan/reportserver?/Report/E-id/HoldingReport&rs:Command=Render&rs:Format=HTML4.0&rc:Toolbar=False&holding=2" so the source contains the right parameter!

and now it gets really weird : when I go back again to the previous screen and immediately click the show reports button again... it shows the correct report! with the new parameter that is!

can you tell me that to do to fix this problem?

thanks,
Danny

Sorry, I am not able to make it run in Flex 3.
When loading the swf file, the iFrame does not display anything.
Anything special to configure for Flex 3?

I am having the same problem as Ronaldo did - local files won't load in the iframe in IE 7, and I tried changing several security settings. When I put the page to be loaded on a web server, it works fine, so I'm pretty sure it's an IE security issue, but still didn't find out what exactly it is.

Hi ,

All my previous issues got resolved.Now
I have an xml which is refering to an xsl.I show this in the IFrame.This works fine and generates a preview for me when i give the source as say data.xml.But now i have a problem that this xml must be dymnamic and probably an xml object rather than a flat file.How do i deal with this now.What are the things that can be given in the source of this component? Thanks and Regards,
Leena Jain

Danny,i have a similar requirement as yours,I want to pass tha combo-box selected values as parameters of a jsp and set the source of the iFrame accordingly .Could you guide me how to do this.

Regards,
Leena Jain

hi,

i have a basic problem.

When i am trying to open the url http://www.raaga.com/CHANNELS/TELUGU/ i am not able to view in the iframe which u gave as sample.

That site having script which is changing top location.

If this problem occurs no use of iframe in my application why because if i open the above url it is completely navigatiing to that url even i press back button it is giving me login page of my application not going to previous position.

Can u please help me out.

Hi All,
How to Load a tif image inside flex. Can anyone send me the source code.
Regards,
Dharma

I'm working on small flex application where I want create a message bar like on facebook.com, so when you browse website flex application doesn't reload. Right now I see two ways of implementation:

1) show website in upper frame and place flex application in bottom frame
2) wrap website with flex application, like in exaple on this page.

is there any better way to implement it ?

I have created a Flex Project in Flex Builder 3. Then copied your mxml files. I can't get the iframe demo to run. Has an error on recognizing iframe.

Hi Leena Jain,

I see for your post above https://deitte.com/archives/2006/08/finally_updated.htm#comment-37982 you've resolved you issue where a browser zoom or size change results in the IFram contents remaining in a fixed position.

I have the same issue - I have a centralised flex app. using the html center control in the body of the html wrapper as settings the application to be centered in the Flex code doesn't work.

Anyway, in my fixed width application, centered on teh web browser, the IFrame contents are offset from the left side of teh browser by the distance the IFrames is position in the containing panel. The Panel is managed by the popup manager and centered on the browser. It doesn't matter how wide the browser is ( as long as it isn't narrower than the Appplication ), the IFrame contennts are static.

I've looked at the moveIFrame functions, both the ActionsScrip and Javascript code, but as I'm new to this I'm needing a little assistance. I think I need to get the absolute application position in the browser as I think it will be different to the global position used in this.localToGlobal(....) in the AS code. My y posioning is fine as the application is aligned to the top (althogh I'm guessing this doesn't work like the horizontal central alignment also in the mx.application declaration - as I said above, I had to use the html center control )

Your response would be much appreciated.

Hi,

I've been looking in this further and think that its related to how I'm centering the flash application on the web browser. The center is done in HTML in the html wrapper ( the second line in the body of the autogenerated project html ).

This right-angle-bracket center left-angle-bracket positions the embedded Flash Player that is playing my .swf flash app. And as far as my .swf is concerned the application is running at 0,0 even though the embedded Flash Player is being shifted right to make it center of the browser (horizonatlly).

The problem is, we are dilvering the .swf via default.aspx from a web server instead of a basca .html file as our application commincates with a backend IIS server and other servers from there.

.
.
.
long pause while googling and testing
.
.
.

STOP, its not the IFrame - sorry!!!, it's the project I've started working on (I've inheritted some existing work) - the html center control in the body of the launching wrapper combined with how the main ma.application was designed (it had a fixed height and width and some panels were left aligned). To fix the problem, I set the mx.application to 100% and center constrained the child panel components so that the application/embedded flash player too up the whole of the browsers width. This therefore copes with the punch-thru Javascript at the heart of the IFrames positioning the html content relative to the applcations origin of 0,0 which is truely 0,0 of the browser!

Now, this is probably very obvious now I've understood whats actually happening - but if others are having similar IFrame content positioning issues, make sure you're flash application occupies the complete browsers width and don't use external html to position the Embedded Flash Player.

...but if you have a web page with a panel that has an embedded flash player in the middle of a web page, then you'll probably have the same problem I was having - but there maybe workarounds such as modifying the moveIFrame ActionScript or javascript code in IFrame.as to add the x & y of the embedded players position to the x & y of globalPt (the result of the call to this.localToGlobal(localPt); in the ActionScript moveIFrame function). So line
ExternalInterface.call("moveIFrame", frameId, iframeId, globalPt.x, globalPt.y, this.width, this.height);
would look something like this
ExternalInterface.call("moveIFrame", frameId, iframeId, globalPt.x + playerOffsetX, globalPt.y + playerOffsetY, this.width, this.height);

The values of playerOffsetX and playerOffsetY are the crux of the problem. How do you get hold of them ? Its the wrapper html that centers the player!

Cheers to you, Christophe Conraets, Alistair Rutherford, Brian Deitte and Ryan Bell and all who have contributed - much appreciated.

Hola,

For those who have the problem where the IFrame doesn't display anything:

1) First of all, opposite to the instructions on this page: Leave the "Generate HTML wrapper file" checked on the Flex Compiler Settings.
2)On the html-template\index.template.html, copy the content
from the IFrameDemo.html file that comes in the IFrame.zip file.
3) Also copy there the
tag.
4) Run the application.

That will show the frame oontent.

Now my problem is that the frame is small (doesn't fit exactly the window for it) in the code I see 100% for width and height, but it still displays in a corner...

Thanks.

I have tried just about everything. I cannot get the html to display. I tried the compiler settings as suggested above. I tried Sandra's suggestion. Is it because I want to use it on my server? I am stumped
No errors just wont display

Hi,
For those who are getting the blank page in the IFrame... if you are using the Flex Builder IDE for compilation..Just copy the IFrameDemo.html in the zip file downloaded to the output folder of Flex Builder i.e., to bin folder if Flex Builder 2 or to bin-debug if Flex Builder 3. It worked for me. I feel that the reason for this is IFrameDemo.html in zip file contains hideIFrame(),showIFrame(),loadIFrame()... javascript functions which are called using the external interface and the file generated directly by the Flex Builder wont contain these functions . Hope it helps.
Thanks
Kranthi

Hi,
I got this working nicely! But I want it to work in full screen mode. Is this at all possible?
bye,
Ariel

Great component, thanks!

I'm using it to display multiple sites in a Flex UI, kind of like a "coverflow" idea. There will be a maximum of 8 sites in the coverflow. Ideally, I would like to take a "screenshot" of the inactive sites, but obviously bitmapData.draw() doesn't draw the iFrame content. Does anyone have an idea of any other way I can do it? Or should I just keep all 8 sites open and change the display index of the frames?

thakns

Yuri

Hello,

I did a search online for HTML embedded in Flex and came to your page. I might want to use your approach on our commercial site. May I use it for free? Or would do I need to pay a fee and/or royalty?

Thank you for your attention,
Paul Hitchcock
ePath Learning

Ariel, it won't work in full screen mode, since that's a Flash-specific feature that bypasses the browser.

Paul, there's no fee, royalty, or even a need to mention this site. Use it as you'd wish.

For future reference, here are the steps to "install" this flash program using Flex Builder 3.

1. Install Adobe Flex Builder 3 (optional if you have it installed already).
2. Get the source code of the program.
2. Create New Flex Project.
3. Name the project as IFrameDemo (I am not sure if you can name it something else, but you can try doing so).
4. On the Flex Navigator you will see a file ending in IFrameDemo.mxml under src, delete it.
5. Right click the project -> Properties.
6. Click on Flex Compiler and then uncheck Generate HTML wrapper file.
7. Click Apply then OK to close the Properties window.
8. Right click the src -> Import.
9. Click on Archive File -> Next.
10. Browse for the source code and open it.
11. Uncheck every file except IFrame.mxml and IFrameDemo.mxml.
12. After that, click on Project -> Build All
13. Extract the source code to a folder.
14. Go to the project folder then to bin-debug. The address for it should be similar to this:
(C:\Documents and Settings\Username\My Documents\Flex Builder 3\IFrameDemo\bin-debug)
15. Copy IFrameDemo.swf into the folder that holds the source code.
16. If you encounter the "Security sandbox violation" error, go to Adobe Flash Player Settings Manager. Then add the project folder to a trusted location.
17. To run, open IFrameDemo.html with any web browser.

I hope this will help others that want to install this program since I took me some time to understand how to operate this program and Adobe Flex Builder 3. Thanks for creating this program, Brian Deitte.

- Dennis

All I ever end up with is white space. I even added the urls to my subnet. What gives? Every thing in flex seems to take 5 days to figure out. I have followed all steps above, and tried othe rifram solutions. Same result of blank white space where there should be iframe with url inside. Is there an easy solution?

I am having the issue where at first the iframe doesnt appear to load, but what is actually happening is that I'll get flashes of it. If I go to another browser tab in firefox then come back i see it! However, if I mouse over it, elements will disappear, like the scroll bars. If I click on anything inside the iframe, it all goes white, and I will have to go to another browser tab then back again to see the contents. As though there is some kind of focus issue. However in IE7 everything works as it should, no issues. It's Firefox 3.0.7 that I'm having the focus issue. However, when viewing your example here in firefox, it works. So I assume it must be something with my code. The nesting of the elements is this:

Any suggestions would be appreciated.

Well, it was an easy fix, setting wmode=opaque in the flashvars. I also used the updated IFrame.as by Brian Deitte which can be found at http://code.google.com/p/flex-iframe/ works like a charm. (after setting wmode to opaque). :)

The IFrameDemo is very cool. But I'm trying problem when the URL contain "'", the IFram.as can not parse URL correctly ( contents of url will be cut after "'").

hi,
I am using Flex 2 and Iframe v1.2
While i try to create panels on the fly and have iframes in it. So, in a single screen there are many panels and different iframes in it. But, only the latest panel added shows up the iframe. Rest all comes as blank..

Can u pls help?

i think Iframe v1.3.2 solves these issues mentioned above (donno how though;-)) but thats for Flex 3. Can someone give me Iframes component supporting these features and Flex2 compliant?

thanks

hello! I have the same problem and I'm using Adobe Flesh Builder 3 but I can't set 'wmode' value. Where are you setting it?
thank you!

I used it with de WMODE (setting it in the index.html file of the html-template folder) and it's ok! but I have another problem:
I want to make vertical scroll on the webpage but the layer of the iframe is fixed on the screen. It doesn't move with the content of the page when I scroll down or I scroll up. What can I do to resolve it?
thank you

Hi,
I just posted some complimentary info on the subject that might be of interest to people using the code.
http://arielsommeria.com/blog/2009/04/22/firefoxs-zoom-messes-up-iframes-with-flex-heres-the-fix/

hi,
i've use this component to display FCKeditor,it's work fine in firefox but not in opera and ie.

this is the application : http://www.deflex.isgreat.org/flexhtml

and this is the source :
http://www.deflex.isgreat.org/flexhtml/myIframe.zip

i hope anyone can fix my code to work fine on all browser. thanks,

I'm using it to display multiple sites in a Flex UI, kind of like a "cover flow" idea. There will be a maximum of 8 sites in the cover flow. Ideally, I would like to take a "screen shot" of the inactive sites, but obviously bitmap have followed all steps above, and tried the riffraff solutions. Same result of blank white space where there should be iframe with URL inside. Is there an easy solution?The IFrame Demo is very cool. But I'm trying problem when the URL contain "'", the If ram.as can not parse URL correctly..i found this informative and interesting blog so i think so its very useful and knowledge able.I would like to thank you for the efforts you have made in writing this article.....

This is awesome!!!..
I've a query.
For example i use a datagrid in one of my application( say App2).
In App1, i use IFrame to access App2 and display that datagrid.
So, I select the checkboxes in datagrid and on click of select button, will those selected row values can be transferred to App1's html page, that host this IFrame.

Thanks in advance

I have problem ,i want public folders,
and run, open IFrameDemo.html with any web browser.
and erro:
TypeError: Error #1009: Não é possível acessar uma propriedade ou um método de uma referência de objeto nula.
at mx.utils::URLUtil$/getProtocol()[E:\dev\3.0.x\frameworks\projects\rpc\src\mx\utils\URLUtil.as:199]
at IFrame/createChildren()[C:\Users\rafael.gurgel\Documents\Flex Builder 3\SimpleHtml\src\IFrame.as:353]
at mx.core::UIComponent/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5262]
at mx.core::Container/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2524]
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5159]
at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3297]
at mx.core::Container/addChildAt()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2210]
at mx.core::Container/addChild()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2140]
at mx.core::Container/createComponentFromDescriptor()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3673]
at mx.core::Container/createComponentsFromDescriptors()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3485]
at mx.containers::Panel/createComponentsFromDescriptors()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\containers\Panel.as:1526]
at mx.core::Container/createChildren()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2587]
at mx.containers::Panel/createChildren()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\containers\Panel.as:1054]
at mx.core::UIComponent/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5262]
at mx.core::Container/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2524]
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5159]
at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3297]
at mx.core::Container/addChildAt()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2210]
at mx.core::Container/addChild()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2140]
at mx.core::Container/createComponentFromDescriptor()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3673]
at mx.core::Container/createComponentsFromDescriptors()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:3485]
at mx.core::Container/createChildren()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2587]
at mx.core::UIComponent/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:5262]
at mx.core::Container/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2524]
at mx.core::Application/initialize()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Application.as:847]
at SimpleHtml/initialize()[C:\Users\rafael.gurgel\Documents\Flex Builder 3\SimpleHtml\src\SimpleHtml.mxml:0]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:1625]
at mx.managers::SystemManager/initializeTopLevelWindow()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:2482]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:2330]

What can I do to resolve it?

Hi All,
I have a requirement where i want to display a swf file that in a popup window. I tried the above example and converted into pop up title window, i am getting the following error.
Could not resolve to a component implementation.
Anyone please help

Hi all, I was wondering if its posible for an iframe not to be blocked by 'noframes' in firefox. A customer of mine isnt happy that her browser blocks it by default. I said it was her choice to have it installed but is causing me quite a problem due to their lack of understanding. Any ideas?

Lien

This is a nice and often reused feature. However, every demo I have seen shows this process in a vacuum. What it does not show is how other objects in Flex will interact with the IFrame. For example, let's say you also need a DateChooser object that is above the panel showing the IFrame. So far so good. The problem is that when you expand it to show the entire month to select a date that any part of this that would expand into the IFrame area does so behind the IFrame making it appear to cut off part of the object no can you select any of the calendar that is behind the IFrame. What it really needs is to appear on top, like any other object. Now to me that would be a home run if you can show that to work as I have been at this for weeks and cannot make that happen yet.

I can't get this to work on my Tomcat server...I am embedding my SWF file in a JSP using a funky bit of Javascript code...and when I run the app on localhost:8080, I just see a blank screen. Not only the IFrame, but also the other components fail to load. Anyone else facing this issue? The app works fine when I run it as an application from the Flex Builder, but I need to have basic auth to get the first page up and that can be done only on the Java side and if I run it on the server :(
Please help!

Thankyou Brian for such a great code !

And thanks to Mike, for explaining the problem, it helped a lot!

hi everyone,

how can i use iFrames with Flex 4?

hi again,
i ve found the solution of my problem,

but now i cannot remove the scrolling :(

Good post. However a suggestion if you provide an explanation in the post itself that the included HTML file holds JS functions. For someone new to this it just take a little long to figure this one out. Will save few minutes.

Once again - thanks for the great post.

i download that file and i run it in locally but it wont run i got Security sandbox violation" error tell me how to resolve it do i need to write any javascript function or anything i want to do..? i need to embed html page into flex tell me any body..?

Hello there. It looks like no one has posted here for about a year. I am having some issues similar to some that other people have had. So here goes. I cant seem to get anything to display in my i frame. I get no errors when i test. I have un check compile html and that did nothing. I then thought maybe if i build release version that might work, but with no luck. I have tested it live as well. I am at a lose. I really would like to get this to work. Anyone have any suggestions?

-thanks in advanced

-Andrew MacPherson

Hi Andrew, I haven't been updating this project for awhile, and I wouldn't be surprised at all if there's problems with it in Flash Builder 4. I believe the last time I ran it was almost two years ago.

I would highly suggest everyone to use this flex-iframe component: http://code.google.com/p/flex-iframe/

The flex-iframe component started off this project as a base, but it's been updated a lot since then. There is also an active Google Group: http://groups.google.com/group/flex-iframe

Good luck, Brian

i used the codes on this post instead. https://deitte.com/archives/2007/09/html_in_flex_wi.htm
and it works fine for me after customizing it myself to navigate to page through tree view.
I tried displaying xml and external html pages in the iframe which works fine, however im unable to display XML which has been transformed from an XSL into html onto the iFrame. it shows a blank page when i try to do that in both IE and Firefox. does anyone know if there is a solution to this?

I'm having the same problem as Christian and Mike. I can see the panels and the tree, but the iFrame is blank (just the white background). I have imported the the files into Flex Builder and then copied the bin folder up to a web server and run the html file from there....still no luck. Any ideas? and am unclick tha generate html wrapper also but still not working anybody pls help this issues..

I am using Iframe component to display pdf in my Flex application. My requirement is to scroll the pdf without touching the Acrobat pdf reader. I have buttons in my Flex App "UP", "DOWN". When I click on them, pdf should scroll up and down. The requirement is strange and the question may be off the topic here. I tried searching in google for a browser pdf controls and browser communication of pdf reader..

Any help and direction is greatly appreciated. Thank you.

Hi..

I want to ask something..I use the IFrame..when compile..no error or debug..I already unchecked the Generate HTML wrapper file.

And when I run by localhost..the frame is blank..
Why? Can someone guide me? Thank you..

Hi,

i recommend to all flex developers that never used I Frame it crates problem when integration with server side.

Thanks.

Thanks for nice tutorial.But,when i switch flex stage mode to full screen the IFrame and its content disppears.Please do suggest how to retain IFrame in full screen mode.

I am using
wmode: "transparent"
still working correctly, on IE9 and FFox4
My flex swf is quite big and extensive, it is using charts and various components.

what does wmode:opaque means exactly? and do i need to worry about it?

Works for me too after a bit of worry because I didnt set the in my index.html

If you follow the steps in IFrameDemo.html exactly it should work with every swf.

Thank you for uploading the source!

setting the i mean.

A small note based on my experience with this. In the moveIFrame function, you need to specify px for the left and top values, like so:
frameRef.style.left=x + 'px';
frameRef.style.top=y + 'px';

Hope that helps anyone who might still be using this...

Hi
I have also come across with the same issue which is when we implementing the sample application to our project it doesn't show iFrame loading the URL but it didnt throw the error either.

Here is the solution, There you need to edit "index-template.html"

Step 1
********
Add below function inside script tag
function hideIFrame(){
document.getElementById("myFrame").style.visibility="hidden";
}

function showIFrame(){
document.getElementById("myFrame").style.visibility="visible";
}

function loadIFrame(url){
document.getElementById("myFrame").innerHTML = "";
}

Step 2
********

Add inside of noscript and object tag
wmode="opaque"

Step 3
********
Add below div tag into the body.

open div tag and give below.
div id="myFrame" style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"

Thats it, you will get the result now. Since i had spent long time on this to find. I dont want somebody to do the same.

Enjoy :)

Thanks.

get link url from onclick link inside iframe OR iframe like wrapper - user will navagate inside iframe.

iframe has cross domain issues,...
can the flash wrapper intercept the onclick event
and pass it to a form input field on the parent page?

k, chat via: moostool2008@gmail.com

tks

Brianui

Hi Brian,

Is the html wrapper mandatory for this to work fine? I need to wrap a web application within a simple flex application which is accessed through swf file without an html wrapper. I tried out and it didn't render the frame correctly when directly access the swf. The frame content is rendered outside the parent container of the frame.