Flex: IFrame Demo Update

As promised here are the previous demos with the need for the web server removed. I have seen the occasional security error popping up but you know how it is, they disappear and then you can’t reproduce the circumstances. Any problems download the code and email me your thoughts.

HTMLTest

This is the original demo. Server reliance removed. Go here

Right click and choose ‘View Source’ to view the source code.

Full Flexbuilder project here.

IFrameDemo

Brian Deittes original demo. Server reliance removed. Go here

Right click and choose ‘View Source’ to view the source code.

Full Flexbuilder project here.

SimpleHtml

Loads html page locally. Works a treat under Firefox. Doesn’t work at all launching from FlexBuilder under IE but does work when deployed as a web page, strange! Download the source code and tell me why. Go here

Right click and choose ‘View Source’ to view the source code.

Full Flexbuilder project here

Things to remember

WMode=Opaque

The IFrame component will do all the gnarly stuff for you except the change to the Flash embedding code for switching the “wmode” to “opaque”. Go to the FlexBuilder demos and examine the ‘index.template.html’ code, do a string search for ‘wmode’. See these changes? Add them to your project.

For a full explanation of what this is and why go here.

Use of the IFrame is essentially punching a hole straight through your Flex application to the browser. The javascript helper functions are there to orientate the html iframe/div combination so that it always matches the ‘hole’ you have made. Think about this for a minute or two and you will realise what the limitations are and why.

Assign an id to your IFrame.

Failure to assign an id to the IFrame component will lead to unpredictable behaviour. The html iframe which holds the contents of the source url is tracked by the javascript functions from it’s id. The same id assigned to the Flex component.

Switch javascript on.

Don’t have javascript switched on? Where do I start? It won’t work because the component requires javascript helper functions which it embeds into the holder page when it’s instantiated. The embedded javascript is reused by multiple instances of the component. No javascript support and the IFrame will not work.

November 22, 2007 | Filed Under Adobe, Flex

Comments

37 Responses to “Flex: IFrame Demo Update”

jimi on November 25th, 2007 3:50 pm

Hi, your modifications to this component are really great. I have used it and i can say that it works perfectly under firefox, IE7 and safari. The only browser that seems to fail showing the html content is opera, but wtf, nobody uses it!!!
Randy Martin on December 9th, 2007 7:57 am

I’ve tried this both with and without modifying wmode. There doesn’t seem to be any difference in IE7. I suspect that the wmode=opaque is necessary when you’re embedding the flash player in a regular html page, but if you’re running a flex app using the default html generated by the compiler, the flash movie takes up the whole browser window. In this case, it doesn’t seem necessary to set wmode to opaque.

Great component, BTW! I’ve cleaned up the source code and added it to my personal compiled library of components. I use it all the time to run a report generated by the ColdFusion report builder in a popup window in a Flex app. Works great for this.

Regards,
Randy
Willy on January 13th, 2008 1:10 am

There is a way to handle click event on link in the html code so flex application could be notified? It should be useful execute flex code before let html link was executed.
Do you think it’s possible?

Regards,
Willy
Administrator on January 13th, 2008 10:09 pm

Willy, yes you can do this quite easily using FABridge and events.

There is a demo and code in this post:

http://ccgi.arutherford.plus.com/blog/wordpress/?p=162

Al.
Aaron on January 16th, 2008 11:45 pm

I noticed sometime when I had it in a couple various containers (Tab Nav->Canvas->Tab Nav->Canvas->Repeater) that once displayed it would stay on top after changing tabs where it shouldn’t appear. If found if you change the javascript to edit the CSS style to use .display=’none’ and .display=’block’ instead of the .visibility tags, it hides it much better.
Administrator on January 16th, 2008 11:54 pm
Aaron, I tried this but with little sucess. I must be dumb. Are you setting these lines?
```
document.getElementById(frameID).style.display=’none’
```
```
document.getElementById(frameID).style.display=’block’
```
Be more specific
Mark on January 30th, 2008 4:54 pm

Hey..
Really great component….worked without a flaw. I have a small requirement, When I open a URL in the iframe and submit a POST request, if webserver redirects me to some another URL, I want to detect the location change (URL redirection) and want IFrame to fire an event. Basically, this functionality is available in HTML control of Adobe AIR platform and I have similar requirement for Flex3.
Can some one guide me to do that.
Administrator on January 31st, 2008 10:05 am
Mark, I’m not sure I understand what you are describing. Are you saying you want to catch the “onsubmit” event from an embedded form and trigger a handler attached to the IFrame? I can’t think how the IFrame would automatically be able to detect this unless it scanned the DOM for the form and attached any supplied handler.

You can call functions in the Flex application through the FABridge mechanism and vice versa. See the communications demo here:

http://ccgi.arutherford.plus.com/blog/wordpress/?page_id=132

Look at #Update 6.

Here’s roughly what I think you would do:
```
\< FORM
NAME="testform"
onSubmit="onSubmitHandler()"
\>
```
Javascript:
```
function onSubmitHandler()
{
   var flexApp = parent.FABridge.flash.root();
   flexApp.onSubmit("Form Submitted");
}
```
Actionscript:
```
public function onSubmit(message:String):void
{
    test.visible = false; // Have to hide IFrame when alert is open.
    Alert.show(message, null, Alert.OK, null, closeAlertListener);
}

private function closeAlertListener(eventObj:CloseEvent):void
{
   test.visible = true;
}
```
Where ‘test’ is our IFrame component.

Look at the comms demo.

Al.
Raed Atoui on February 13th, 2008 7:03 am

hi
thanks for the component, and for the IframCommTest demo. Have you tried using it with Safari? Are you using a modified version of the FABridge? I tried running the sample you gave but i used the bridge that was located in the Flex SDK instead and nothing worked.
Any thoughts? thanks!!
Administrator on February 13th, 2008 9:28 pm

Raed, I tried it out with the latest Safari beta (v3.0.4) and it does not work. This is a bit of a disappointment but not totally surprising. I suspect FABridge is a ‘bridge too far’ for Safari in terms of javascript. The IFrame works though so clearly Flex can talk to the page through ExternalInterface.

For the Flex2 demos the version of FABridge I am using is the one that was downloadable originally from Adobe developer site. The one I use in the flexTraffic application is the one bundled with Flex3 so I am sure it should be okay. The flexTraffic application doesn’t work under Safari either.

It’s unfortunate about Safari but I suspect it will have to be up to Apple to make it work.
Raed Atoui on February 14th, 2008 8:33 am

you are right, the bridge from both sdks (flex 2 & 3) work fine in firefox, yet, nothing in safari. just out of curiosity, have you tried IE7 – IE6? I did and i started seing the index list after each event! if you wish to see it, i am working on this site
and if you go to the music section and click on any of the bold items, IE7 will throw a nice surprise!
http://emedia.art.sunysb.edu/debt/flexprojects/Asa/AsaDjinnia.html
dont mind if you dont use IE! thanks again
Administrator on February 15th, 2008 10:50 am

Raed, The IFrame has been tested against IE6 and IE7. IE6 it works correctly, IE7 there is an issue with the “wmode=opaque” setting when attempting to use it inside a popup.

I found your page (after a bit of rooting around). The reason you are getting a directory listing when you click on the links under IE7 is because it is enforcing the meaning of the href=”" strictly and causing the directory to be listed. My code formatter plugin claims to be able to format html but it doesn’t work. If you view the following box in Firefox, select it all and then view the selection source you will see what I mean. I have stuck in a music icon at the start of the line. This is the music.png file from the slik icon set. You can get this here.

tm1
tm2
tm3
(live at the tag gallery la haye)
Raed Atoui on February 16th, 2008 8:50 am

hey, sorry i had to move things around and change the structure of the site in order to release it. the link i supplied is probably not working now.
But yes, the href made the difference. I can see the box, but i cant see music.png; unless its intentionally blank?
Yet again, i have to wait for Safari to start working with the bridge. thanks again,
cheers
Raed
Gene Pavlovsky on March 7th, 2008 12:04 pm

Hi, Alistair.
Nice component, I really like it AND understand how it’s done (which is what I like, as well). We’re using this component in a project to open external links. There’s a list of links in our application and when the user clicks it, the URL loads in an iframe on top of the flex app (completely covering it). We need to have a “close” button that closes (hides, actually) the iframe, I had to made an html one instead of putting in a flex one (requirements). And so I’m loading a second iframe, “close.html”. However, it doesn’t load in IE. I’ve done some tests and the problem is – IE won’t load any relative URLs passed as iframe src, at least when using this component.
This html/js, however, works fine in IE:

document.getElementById(”div1″).innerHTML = “”;

I’m quite baffled about this behaviour, and I bet you know why’s that not working. Can you tell me?

Thanks!

–Gene Pavlovsky
Carlos Cruz on March 7th, 2008 7:54 pm

At the risk of sounding obtuse, could the action script ‘iFrame’ be used to render html ie an html email from database.

Would it also be possible to send and receive values to and from something like FCKeditor.

I’m not asking for an how to, but if someone could point me in the direction where I should be lookng for the solutions I would greatly apreciate it.

cheers
Carlos
Administrator on March 8th, 2008 1:17 am

Gene,

This is a known problem. I am baffled as well. Can you try accessing your app via a web server (i.e. Apache) and confirm that it works okay with IE through that? Also if you use Firefox as your development browser you shouldn’t see the problem. This is no solution I know. I am convinced it’s a security setting but I haven’t found the magic combination to make it work yet.

Carlos,
I think I know what your getting at and I don’t think it’s possible. The control requires the existence of a real page to insert the javascript helper functions into. It’s late so maybe I’ll think this through further in the morning. You can communicate in both directions Flex/html-page html-page/Flex no problem. See the communications demo in the list under the ‘Projects’ page. I see no reason why you couldn’t talk to FCKeditor.
Gene Pavlovsky on March 9th, 2008 2:27 pm

Alistair, I’ve tried our app in browser, and it does work in IE (setting src to a relative url). So it only doesn’t work in IE when run from local filesystem (file:// scheme).
Gene Pavlovsky on March 9th, 2008 2:28 pm

I mean, from a web-server. Sorry!
Carlos Cruz on March 10th, 2008 7:09 am

Thanks for the “compass” I would be very happy if I was able to make it work with FCKeditor and send var values back and forth. I will play around with it, although javascript is not my strong suit, but how tough can it be? (a joke)

Thanks Again!!
Carlos
Administrator on March 10th, 2008 10:29 am

Carlos,

After thinking about your initial problem of loading pages stored elsewhere into the iframe, I realised that this is possible. The latest version of the IFrame component inserts an extra ‘div’ which can be loaded by setting the ‘content’ property. You can use this to programatically load html into the page.

Al.
Eric on April 28th, 2008 12:31 pm

Hi,

First I have to thank you all for this blog creation.

I’m new to Flex. I’m just trying to have a flex menuBar on a web page. But I’d like to keep some HTML content for each menu entry.

It is very simple, it looks like this:

The problem is that the sub-menus (when showing) appear UNDER the iFrame and that I can’t manage to make them appear on the first plan. The iFrame has always the 1st z-order.

Is it because of the iFrame ?

Thanks for help.
Eric
Eric on April 28th, 2008 2:37 pm

Ok actually I found a solution: I’m using a DIV tag to embed my flex app. Then I can move it whereever I want.
Administrator on April 28th, 2008 8:04 pm

Eric, you are correct. You can’t overlay any Flex content onto the IFrame area it always falls behind it. This is to do with the nature of the trick that makes the frame possible.

Al.
Adrian on November 1st, 2008 2:51 pm

Hi,
I found the IFrame component when trying to workout how to render html/web content on my Flex app. (couldn’t beleve there wasn’t a native component for a web deliverable Flash App!) …anyway, it looks good but I have a content positioning problem (latest download 20th Oct.).

My app is of fixed width alligned to center on the browser regardless of how wide the browser is made. There are a bunch of Panel’s with Canvas comonents that are made visible and centered using the popup manager. When I change the source of my IFrame, the rendered html is shown on teh browser from the left origin of the browser thereby being offset from the frames position. I beleive this is to do with the horizontalAllignment=”center” settings in the mx:Application.

So basically, can the moveIFrame() function be corrected easily to copy with centered applications ?
…it seems the localToGlobal(localPt); function you’re using doesn’t cope with applications that are not at an origin of 0,0.

I notice that all the demos in the download are by default left-alligned – so resizing the browser will have no effect. IFrameDemo just resizes the IFrame component in the HBox – I guess a standard function of setting width=”100%” on most containing components that contain the IFrame.
Adrian on November 1st, 2008 2:56 pm

Hi, Sorry, forgot to mention it’s the FB3 1 3 2 version I’m using, not the one from 20th Oct.
Adrian on November 1st, 2008 4:09 pm

Hi Again,
Just been doing a bit more testing and it appears that in the project I’m working on, the flash app is centered using in the body of the launch .html
(IFrameDemo.html launcher as created in FB3 – Project->Export Release Build) and run from a web server. It seems too that any flex application centering in the Design Layout isn’t honoured – maybe I don’t understand that relationship yet.

So, when I lauched IFrameDemo from the modified .html file the app. is centered. If the browser is the width of the application (I set the IFrameDemo to a specific as is my app.) then the IFrame is positioned where it should appear. If you resize the browser the application centers (blank browser space appears left and right) but the IFrame content remains at the same position. If you launch the application with a browser set wider then the IFrame is still offset as though the browser is the applications width.

Your help would be much appreciated.
Adrian on November 1st, 2008 4:11 pm

Doh, the didn’t apear correctly in the line “using in the body of the launch”, hopefully some spaces will trick this web page!
Adrian on November 1st, 2008 4:12 pm

Still no left-angle-bracket center right-angle-bracket!
Adrian on November 1st, 2008 10:58 pm

Hi, Me again. Done a lot of reading and testing and have solved teh html content positioning issue when the embedded flash player is centered in the body of the html wrapper.

…not going to fill up more space here, just take a look here http://www.deitte.com/archives/2006/08/finally_updated.htm#comment-41762

cheers
Administrator on November 6th, 2008 12:27 am

Hello Adrian,

Sorry your posts didn’t appear more promptly I have been busy and don’t always check the comments!

I am not sure I completely understand the issue but I point you towards here

http://ccgi.arutherford.plus.com/blog/wordpress/?p=163

and here

http://ccgi.arutherford.plus.com/blog/wordpress/?p=178

where I am attempting to programatically modify the size and position of the iFrame from within the Flex app in response to changes in the browser window size.

I hope this helps but if you have already sorted it then that’s cool.

Al.
Adrian on November 9th, 2008 7:52 pm

Hi Al,

Basically, if the Flash Wrapper HTML has the HTML Center control (essentially positioning a Flash App in the middle of the browser regarless of the Flash Applications (the main mx:Application attributes), the HTML rendering in the IFrame has it’s origin of 0,0 aligned with the browser and not the Flash app. This results in a horizontal offset where the HTML IFrame overlay is next to the left edge of the browser. It’s the localToGlobal routing in MoveIFrame that can’t cope with the centering of the embedded player in the web browser. As far as the Flash App. is concerned, 0,0, is it’s lop left and thinks that is the same 0,0 origin of the browser when in fact HTML wrapper is shifting everything.

I hope this explains it in a nutshel – it’s difficult to explain in words when a few lines and boxes on a piece of paper will explain it in 5 seconds!!!

Additionally, the Deep Linking was a pain in the proverbial. I wan’ted a nice clean URL in the address bar and didn’t want browser title changing with every IFrame page transistion – afterall the Flash app is the app the customer is using and the IFrame a presentation method for HTML content. I stripped out the BrowserMAnager and replaced it with a few javascript functions from a guy off flexpasta.com (HTTTPUtil) to obtain teh URL for the Base (apphost) and allow for cross-domain checking. As soon as you initialise the Browser Manager, you start getting the # symbol indicating the Fragment part of the URL.

My customer wont be given the opertunity to browse by entering URLs nor be able to bookmark Deep Link – I just want to display an HTML page which was another small helper component for the admins of the product. I just liked the way we cauld integrate that web page to make it look like part of the flash app. keeping the same look and feel.

And for that, I’m extremely grateul for yours and others efforts with IFrame – a lot cheaper than the $149 HTMLComponent!!! …but hey it probably does a ton more tricks that I don’t specifically need. … yet!!!
Adrian on November 12th, 2008 2:09 am

Hi,

The last two message were a result of me getting ahead of myself. Please don’t accept them for posting on the blog.

So, a reason for why I thought it was working. Firstly, it was a bug that I’ve seen regarding FireFox not displaying the IFrame in the containing Canvas, it displat it left justified and vertically under the main application.

While I was tracing through a IE Script Error report (Line 1, Char 6, expected a ; ) I noticed that in the “visible” function, the show and hide Div external interface calls were being hit.

It seemed that the logic was not working as expected

!if (source && iframeContentHost == appHost)” whould fail because I was passing a page name in the call to “source” which is relative to the domain the flash app. is in and should therefore call the show and hide Iframe external interface functions.

Now back to why I thought I’d fixed – I initially tried commenting out the if statements and force is to call the Iframe show and hide funcs. I compiled and ran the app all looked like it was working (it actually was working – the HTML overlayed in the correct possition. BUT, this was being run from Flex Builder 3, SO, when I copied the flash file to the target IIS Server, it stopped working.

Is this something to do wmode and opaque as I’ve got that in the wrapper html launcher as a param. for AC_FL_RunContent(…) ?
kishor on January 25th, 2009 4:16 pm

I need to open multiple mail a/c same time, but This IFrame solution does not work with Google mail, how I can open my gmail a/c with in IFrame. any solution, help.

Regards
Kishor
Jashraj Deshpande on June 4th, 2009 8:22 am

Hi

I tried using your component to load a jsp in one of the tabs. But it doesn’t work. Is there any specific changes one needs to make to display a jsp content inside your IFrame component.

Please reply ASAP.

Thanks in Advance

Jash
Administrator on June 6th, 2009 2:44 pm

Html will not render using I.E within the IDE. It will work when accessed through web server. You’ll need to be more specific I’m afraid.
Anteneh on August 13th, 2009 3:06 pm

Hi Sir/Madam
I am developing web site for political organization. But I’ve got a problem to display web page on flex component. what should I do to solve my difficulty.
Regards
Anteneh
Administrator on August 20th, 2009 8:23 pm

Anteneh, You can specify your problem here or email on the address in the ‘about’ page of this site. Have a close look at the demos and read the FAQ on the Google Code page as most people make the same mistakes.

Leave a Reply

Flex: IFrame Demo Update

Comments

About

Recently Written

Categories

Archives

Admin

Flex: IFrame Demo Update

Comments

About

Recently Written

Categories

Archives

Blogroll

Admin