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:

http://www.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?