Flex: Towards a better IFrame HTML component.
If you just want to get the code and skip my ramblings go here. Right click to examine the source.
When I set out to teach myself flex I decided that it would be a good experiment to convert my gTraffic application, which is written using GWT, to a Flex version. Rejecting the Yahoo Flex map I ended up with a kind of hybrid solution of a Google map with a Flex back end. This was made possible by the extremely clever IFrame component.
The IFrame component was developed originally I believe by Christophe Conraets and then subsequently improved by Brian Deitte.
There are a number of issues I had with the original code (as clever as it is).
- It requires the addition of a number of supporting javascript routines.
- It needs the developer to add in an iframe explicitly to the holding page of the application. There are different techniques for implementing multiple tabs one of which was to add in multiple iframes, again by hand.
- I was using the accordion control and noticed that the component was unable to detect that it wasn’t visible behind many other components and switch itself off. Handling this required sticking in code which was aware of the structure of the application when I just wanted to forget about that stuff.
Okay, none of those points are particularly onerous but what I really wanted was a true drop in component. You put it in, give it the source url and away you go without having to fanny about with the web page.
Have I succeeded? Well sort of. The new component implements the following.
- Inserts the javascript support rtns directly into the DOM for you. Multiple controls reuse the same routines.
- Adds the required iframe element directly into the DOM for you. One for each instance of the control.
- Detects when the component is not visible and switches off the html.
Unfortunately you still have to make the change for the wmode, ‘opaque’. I’m not going to attempt to explain why you need this. You can see the change in the zipped source files here
And thats all. The demo is here. Right click to get the source code.
I should mention a few things which may puzzle a few of you.
- The code to detect visibility isn’t perfect. You may have to force the control visible on startup if it is within the main view of your application. If it’s hidden – no problem it’s just kicking it off that might cause you an issue. Someone please email me the an easy way to do what I have implemented in a rather roundabout way. I can’t believe there isn’t a simple way to handle this stuff. What I have done is to ’seed’ all the container objects up the display path, to the root of the application, with event handlers which trigger a call to the control. The control maintains a list of the views all the way to itself and uses this to detect if the display path indicates that it is exposed.
I submit this control back to the Flex community in the spirit that it was contributed in the first place. Any improvements, bug fixes etc then email me at the address mentioned in the about section.
Related posts:
IFrame demos updated to Flexbuilder 3 & Other stuff
IFrame Resizing
IFrame comms demo update
Comments
69 Responses to “Flex: Towards a better IFrame HTML component.”
Leave a Reply
Alistair, looks great! I posted on this:
http://www.deitte.com/archives/2007/09/html_in_flex_wi.htm
Note that I’ve gotten a security exception when viewing your example sometimes (although I don’t see it now, so I can’t tell you the info). Also note that I’ve gotten a database error a few times when viewing your homepage. Hopefully I don’t cause any more problems for your server with my links to you!
1) is this much different to Judah’s HTMLComponent.swc?
2) there seems to be something funny with the example and Camino on a Mac. Something to do with the mouseover on the tabs. Might be worth looking into.
Barry,
1) This is different from Judah’s component in two ways.
Judah looks to be an experienced Flash developer so I am willing to bet his solution for detecting when the view is exposed is better than the one I have adopted.
No javascript to add to the holding html page. The scripts are encapsulated inside the component and added on creation into the DOM.
2) Alas, my access to a Mac is limited but I will get a friend to check on this . I am not sure what I could do to fix something like this but thanks for pointing it out.
Brian,
Thanks for the mention. I have come across annoying random security violations with Flex in the past but usually to do with loading localised xml. If this is a regular occurrence I will be worried.
As for the homepage: my ISP can be flaky. I hope there is nothing wrong with the database for the Blog. Sounds like a backup is in order anyway.
Alistair.
Thanks. The main diff for me is that this one is free and the code is open for people to improve if they see a need to.
Excellent component. I’m fairly new to flex and just playing around with it and it seems to be a great solution. May be a silly question but is it then possible then to call a js function that is already on the html that will be referenced in the iFrame?
Hi,
while trying to combine Brian Deitte’s IFrameDemo: http://www.deitte.com/IFrameDemo3/IFrameDemo.html
and your IFrame-Component of your example:
http://ccgi.arutherford.plus.com/website/flex/iframe/HTMLTest/
your IFrame-Component does not show up with maximum size (100%) in width and height when I set the source-attribute more than once.
If like, I would send you the code for reviewing.
Thank you,
masu
Nicky – I have looked back at your question and I think I may have misunderstood the first time so I am going to attempt to answer again.
If I have got this straight. You are asking if it is possible to call a javascript function from the page loaded into the iframe. The answer I think is yes but perhaps only if the page is within the same domain as the application. That is, I am using javascript functions loaded within my frame which runs the Google map inside my flexTraffic application no problem. I haven’t tried it yet but if I was to load someone else’s page remotely and then attempt to call one of their js functions I suspect I would get a security violation message.
Sorry if I have got the wrong end of the stick again.
masu, I have fixed this in the latest version (1.1). The problem was that the frame wasn’t being resized when the source url was assigned. You can download the updated code plus a modifed version of Brians demo from here.
Alistair,
On the same line on Nicky’s question. If I want to call a js function from my loaded html page (using your iframe.as , how do I do that?
For example in my html page I need to expose a function to display address in google map and the address is coming from a flex component.
How do I do that?
Thanks,
Rohit
Rohit, I have mailed you this link but for the benefit of everyone else. There is a demo with souce you can view here: http://ccgi.arutherford.plus.com/blog/wordpress/?page_id=132
Thanks a lot Alistair,
It’s really cool. Over the weekend I got a version working based on the simply reusing your iframe.as code.
As simple ExternalInterface.call didn’t work (it can only access the container’s js functions). So what I did was added a function in the parent that in truns calls the inner iFrame’s js function
Steps I followed:
1. Created html page with one js function ’showCAlert’ to show alert
2. In my mxml file using the same method of adding loadFrame, showFrame etc I added one more js script function as that calls the embedded iFrame’s js function as
document.frames.iframe_test3.showCAlert()
test3 is my iFrame ID.
3. From my mxml file I simply used
ExternalInterface.call(parentjs call, argument);
If anyone interested ( I don’t know why?) drop me a note and I will email you the code.
thanks! this was fun weekend.
Rohit
About setup as a ‘server’ project: I don’t understand why you should build your application this way. I’m planning to build a simple SWF with my flex application, I don’t want to depend on a server. What I understand is that if the proyect isn’t a server project, I won’t be able to use the IFrame component, right? It’s a very usefull n’ simple component, I’d really like to use it.
Thanks, Martin.
martin, I have checked this and you are correct. You do not need to dish your application up from a web server to use the component. The reason I started down that path was because I was trying to embed a Google Map into the page. The key for the map requires a match to a url and the url can’t be a file path.
I will adjust the demos accordingly.
Hi,
I used the Flex iFrame component into one of my project and I found some problems when different kind of modules are loaded into the tabNavigator; obviously some of these modules are iFrame container. In particular, when the focus is captured by one of the HTML pages, it is impossible to set the focus on other Flex component. I solved this problem inserting these two properties to the showFrame and hideFrame javascript nested function. These are the two modified functions
private static var FUNCTION_HIDEIFRAME:String =
“document.insertScript = function ()” +
“{ ” +
“if (document.hideIFrame==null)” +
“{” +
“hideIFrame = function (frameID)” +
“{” +
“document.getElementById(frameID).style.zIndex=-100;” +
“document.getElementById(frameID).style.visibility=’hidden’;” +
“document.getElementById(frameID).state.focused=’false’;” +
“}” +
“}” +
“}”;
private static var FUNCTION_SHOWIFRAME:String =
“document.insertScript = function ()” +
“{ ” +
“if (document.showIFrame==null)” +
“{” +
“showIFrame = function (frameID)” +
“{” +
“document.getElementById(frameID).style.visibility=’visible’;” +
“document.getElementById(frameID).style.zIndex=+100;” +
“document.getElementById(frameID).state.focused=’false’;” +
“document.getElementById(frameID).state.unsetProperty(’focused’)” +
“}” +
“}” +
“}”;
Have you already noticed these anomalies?
hi i used the code above i got an error like:
SecurityError: Error #2060: Security sandbox violation: ExternalInterface caller file://///wdoserver/Kumar/flex_prog1/bin/HTMLTest.swf cannot access file://///wdoserver/Kumar/flex_prog1/bin/HTMLTest.html.
some one please help me iam ding a project and need some giudence
plz………….
I’m having a few problems with this. The main problem is it is not displaying in the right location. It works fine with a blank html wrapper but i’m embedding the flash into some html so the flash is in the middle. The frame still thinks it should be placed at x=0. In order to get it to display right I have to manually set it, but this only works on my PC.
Also if you resize the browser, the frame disappears.
Thanks,
Brad
Marco, I haven’t noticed this anomoly but I am using the iFrame in a very specific way. Your solution will help other trying to do a similar thing to yourself so thanks for posting this.
kumar, I was playing around with referencing a remote url from a non ’server’ type project (where the swf is run as a file) and I have seen this error.
Brad, let me get this straight. You have an html page with an embedded flex app in the middle into which you have an embedded iframe component displaying html? I will have to mull that one over.
I have been playing around with loading an html file locally (instead of using a web server). It should work but if you are getting security errors or seeing a blank page then I believe it might be an IE security setting. My sample application (which I will post up) works perfectly under Firefox but with IE I get a blank screen. If I access the file from my web server it is fine. So..it surely has to be a security setting. Anyone having problems can you state which browser you are using.
Hey there,
Great piece of work, the IFrame is exactly what flex needed. However, I’m currently using it in an application that loads the iframe within a tab navigator when i change from one state to the other. for example, changing from the base state, to a “league” state which then shows a html page for a football league.
if you click on the html page, say navigate using a link, everything is fine.
if you dont and just look at the page and then use the menu to change state, the tab navigator is hidden, the state is changed, but the IFrame is still visible, despite calling iframe.visible=false.
in the website url i submitted, if you follow the navigation menu on the left, 11 A Side then click the sub menu “League Table” this will show you the tab navigator with the IFrame, if you then select another item from the menu, say home. the IFrame is still visible?.
any ideas why?
Cheers
Chris
Chris, I have examined your page.
1) You will need to add the tags wmode”, “opaque” to the Flash embed code in your holding html page. I.e modify your html-template as in demos posted up on this site. These tags perform some essential magic for the iframe.
2) I can’t see anything on Firefox but that is due to (1). Firefox has a great debugger called Firebug which I highly recommend. I mention it because I used it to examine the DOM for your site and I can only see one holding iFrame element despite multiple html elements to your site. I could be wrong but can you check that you are using a seperate IFrame for each html page in your tabnavigator and also that you have given them each a unique id. I.e I _think_ it would be possible to use the IFrame but not assign an id.
Let me know how you get on. I am sure it’s fixable. You can email me directly on the address in the About page.
Anyone know what would happen if you would allow this component to go into Flash full-screen mode?
Would it be possible to do so? Etc?
Thanks,
David
Hey there,
this component is great. Thanks for that!
.
It took me a quite while though until I realised that i have to set the visible property to true, when it’s not used within a TabNavigator
I modified it a little bit so that you can also set a content property instead of source to display a div container instead of iFrame. I am using it to display html emails in a little application i am developing at the moment.
I thought it might be handy for anyone else too, so i uploaded it with source view enabled.
Here is the url: http://16-bits.com/HTMLTest/HTMLTest.html
Enjoy your weekend and thanks again,
Max
Max, excellent work. The contents of the div in your demo is not displaying on my Firefox or IE though. I had a look at the html and I think you will have to add the “wmode, opaque” settings in the html. You can see the appropriate settings in the examples posted on this site. Anyway, I had a look at the code, very neat!
Oh that’s good to know, Alistair. It is is wired though, because it is working fine on my system without “wmode, opaque” so I didn’t set the parameter. I have got a Mac and tested it in Firefox 2.0 and Safari 3.0. Both were displaying correctly. I will upload the updated files in a sec.
Cheers, Max
Max. It’s working now. Nice.
I’m trying to add the iframe dynamically to a vbox using addchild method, then adding that vbox (again using addchild) to a tabnavigator. It doesnt seem to work, do you or anyone else have an example of using addchild to add an iframe??
my code is as follows;
private function addTabItem(parent:DisplayObjectContainer, tabTitle:String, URLSource:String):void{
var xitem:VBox = new VBox;
xitem.label = tabTitle;
xitem.name = tabTitle;
xitem.id = tabTitle;
xitem.height = parent.height;
xitem.width = parent.width;
var itemFrame:IFrame = new IFrame;
itemFrame.id = ‘fr_’ + parent.numChildren + 1;
itemFrame.name = ‘fr_’ + parent.numChildren + 1;
itemFrame.source = URLSource;
itemFrame.height = xitem.height-30;
itemFrame.width = xitem.width – 30;
itemFrame.x = xitem.x+30;
itemFrame.y = xitem.y+30;
itemFrame.setVisible(true);
xitem.addChild(itemFrame);
parent.addChild(xitem);
}
I have already made sure “wmode” is set to opaque and my project is not creating the HTML wrapper.
any help would be appreciated,
Thanks – Kevin
Hi,
I’m 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
Kevin, Can you knock together a simple demo as I can’t see anything wrong from a read through your code.
Larry,
Yes you can call javascript functions in the iframe html. That is exactly how my flexTraffic does some stuff. A stripped down demo of this technique is here:
http://ccgi.arutherford.plus.com/website/flex/iframe/IFrameBridgeTest/
I added the IFrame to a TitleWindow. I would like to display the TitleWindow (and child IFrame) as a modal popup using PopUpManager but I get the following error when the TitleWindow is added using PopUpManager.addPopUp(titleWindow, this, true):
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.containers.utilityClasses::CanvasLayout/measureContentArea()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\containers\utilityClasses\CanvasLayout.as:823]
at mx.containers.utilityClasses::CanvasLayout/measure()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\containers\utilityClasses\CanvasLayout.as:213]
at mx.core::LayoutContainer/measure()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\core\LayoutContainer.as:389]
at mx.core::Application/measure()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\core\Application.as:897]
at mx.core::UIComponent/measureSizes()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:5701]
at mx.core::UIComponent/validateSize()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:5647]
at mx.core::Container/validateSize()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\core\Container.as:2694]
at mx.managers::LayoutManager/validateSize()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\managers\LayoutManager.as:557]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\managers\LayoutManager.as:670]
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:8338]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\flex_3_beta2\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:8281]
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
Has anyone else encountered this? The error infers a sizing issue, but I’ve specified height and width for the app, titlewindow, and iframe all to no avail. Strangely, everything works when the last parameter, modal, is set to false but I can’t move the TitleWindow as intended. Thoughts?
Erik, Can you remove the iFrame reference and confirm if you are still getting this error?
The app works correctly when the iFrame reference is omitted.
Because this occurs when the TitleWindow (and child IFrame) is modal, perhaps it’s an issue with moveIFrame?
I’ve got the iframe containing an html page sucessfully embedded in my flex app! I do encounter an issue with the iframe though. When I open a Flex TitleWindow as a modal “popup”, the html page in my iframe will always appear on top of my modal popup window. How do I make sure to make the iframe is always behind any modal popup window? Thanks!
Erik, I am afraid I have little experience of using the iFrame in a popup window. I do know that it has been done by others. I will try and find the time to investigate this.
Larry, You cannot display an Flex element in front of the iFrame. This is mentioned elsewhere on this blog but perhaps I haven’t made it clear enough. The only solution is to set the visibility of the iframe in the background to false when your TitleWindow is in the foreground. You will have to design the layout of your application around this. There is no way around it I’m afraid. The iframe is essentially a hole in the Flex app through to the browser, it is not rendering the html in Flash so you cannot overlay flash elements on top of it
Have another question about the iFrame. Is there a way for a javascript function in an HTML page that is housed in the iFrame to call an AS3 function in the parent Flex app? For example, I click on a link in the HTML page of the iFrame which invokes a javascript handler that returns a String needed by the parent Flex app. I’ve tried using callback functions with the external interface but seems like this does not work. Any help would be appreciated. Thanks.
-Larry
Larry, There is source code and an explanation of how to do two way communication between the html page and the Flex application here:
http://ccgi.arutherford.plus.com/blog/wordpress/?p=162
It’s pretty straightforward. The demo is standalone now, the previous version required that it had to be deployed to a web server.
As to your question elsewhere of releasing the source for flexTraffic it is a bit difficult as I ended up using large portions of this in a commercial application. The map and it’s supporting code in particular are one of the unique features of the application. If you have a look at the comms demo some of what I was describing in my rambling attempt to describe the resize procedure might make more sense.
However, I can see this is a bit of a gnarly issue and I think I will try and put something very simple together like a small map application with the resize functionality added to show how it’s done. It’s down to the magic of FABridge at the end of the day.
Thanks so much. Would really appreciate it if you can show an example of the resizing of your map.
-Larry
it doesn’t appear to work in flex builder 3
Hi Michael, none of the demo projects are FB3 projects. Since FB3 was only released on Monday I need to get around to creating FB3 versions. I don’t believe there is a specific FB3 problem as I had a quick go at recompiling ‘flexTraffic’ (ebedded Google Map) with the released FB3 IDE and it seemed to be fine.
If you can’t wait it isn’t hard to recreate an FB3 version on the simple demos as long as you remember to put the wmode=opaque setting into the html template file.
So the underlying question is…Is there a component such as the RichTextEditor/TextArea/etc in Flex 3 which does away with this problem?
Bob, the answer to this is no. There is no Flex 3 equivilant (someone correct me please if I am wrong).
The (sortof) Flex 3 solution is to use the Air html component but that is for the Air player not the standard Flash player.
The whole other question is why not? The current implementation is a bit of a hack. There was suggestion a while back about bundling the Air stuff into the Flash player but as far as I know this was rejected because the player download would be too big.
Another iFrame/wmode problem is that it affects “Ctrl-Click” events. Multiple selections in a DataGrid component no longer work with Firefox but works fine with IE.
Bob, I didn’t know that one. Thanks for pointing it out. Alas there are limitations as the mechanism to make this work is a bit of a hack.
Hi Alistair,
I follow this post with big interest since I’ve tried to use this in my app.
However, don’t know if it’s a Flex3 problem but all works fine in IE (that’s new) and not in Firefox.
“Permission denied to get property HTMLDocument.referrer”
Hope you or anyone has a fix for that.
greetz
Gerdt,
From what I can gather this error may be to do with attempting to access data in a frame which is in a different domain. Can you provide some more details of your application?
Al.
Hi Alistair,
I placed an IFrame in a TitleWindow opened with the PopUpManager, but when I drag the window the IFrame remains in its original position.
Does the IFrame support this?
Regards,
Gabriel
Gabriel,
By far the most requested feature is displaying the IFrame in a Popup. I haven’t had a go at this yet but I hope to find the time to. I have receieved emails about this and as far as I can tell it has been done. Sounds like a good Sunday afternoon project. There are other features I want to add like automagically inserting the wmode=opaque stuff into the html so all I can say it watch this space.
If someone else has done this and wants to bask in the glory of demonstrating their extreme AS3 skillz then I would be grateful.
Hey Alistair,
First off, this is a great component! Thanks so much for sharing it!
I do have a question though, and I’ve seen a few others with this one, but I haven’t been able to get it to work or find a solution, and thought you could help!
I have an iFrame that is in my flex app. This iframe is 200w x 400h and it’s on the right side of my app. When i load the app, the iframe looks great, showing the contents perfectly. When I resize the browser window however, the contents moves out of the place. I’m not looking to resize the iframe, i just want it to stay put. My app is not taking up 100% of the browser window, so that may have something to do with it.
Any suggestions? I took a look at your iFrame resizing stuff, but I haven’t had much luck with it.
Thanks!
Adam
Adam, I will try and recreate what you describe and get back to you.
Al.
Thanks Al! Let me know if you can’t get it to happen.
Howdy everyone! I’ve been planning to implement an IFrame in the application I’m building for a while now. Last night, I finally got to that point. So, I played with Deitte’s IFrame and found this one too. The demos all seem to work fine online. However, I downloaded the sources and opened them separately as projects in Flex Builder, compiled the apps and launched them with the default browser Firefox (whatever the most current release is), but they don’t work (right) when I compile & launch them.
I have a tab with this (Alistair’s) demo open (in Firefox) and it works perfect (except for the error that showed on init, which I captured and pasted for you at the end). But if I launch the same app from FB2, I don’t get errors, the tabs show up, but the HTML content only shows for a split second. That is it flashes once for just long enough to know that it’s there. This is for both tabs and it recurs if I change tabs–just a brief flash of content then blank white tab. If I change the borwser that FB2 uses to IE6 it works fine on launch. In Opera 9.27 I get tabs, but not even flashes of content (though it indicated that it[Opera] loaded 30/30 images on launch).
I get similar, or identical, results with Deitte’s demo.
Also, I dropped in Alistair’s IFrame (via the components panel in design view) in my own App, positioned it, gave it a source, sized it to 70%x70% centered, recompiled and–nothing. I clicked on it (where it should be), but that just triggered the BG click handler. I then gave it a border & a white background of its own (.2 alpha), recompiled and sure enough, I could see the border framing a thin white veil, but nothing else. Do I need a particular compiler setting, or is there some other problem. I only started learning Flex in November and I’ve learned a lot, but I’m only just now getting to the HTML/HTML wrapper stuff. My compiler is set to use-network true (I think, I’m using PHP pages on a remote server as webservices for my database activity and I had some problem when I first started playing with Flex that was solved by setting the use network option, but I can’t even find it now?).
Thanks a lot
Todd
Here’s that error message:
Error #2044: Unhandled SecurityErrorEvent:. text=Error #2047: Security sandbox violation: LocalConnection.send: arutherford.plus.com cannot access http://ccgi.arutherford.plus.com/website/flex/iframe/HTMLTest/HTMLTest.swf.
(the app seemed to work fine though?)
Well, I figured out that the flickering was what the whole wmode stuff is all about. I didn’t snap to the fact I was overwriting a wrapper with it already in place.
I created a “combo-compo” with an IFrame centered on a “Drag-Panel” (c.f. FlexBox et al). This panel moves into/out-of view as needed. When first playing with it I was mildly entertained to find that when the panel you “shoot” off the screen–it would dump its payload, namely the HTML, as it left the screen. I guess maybe the moveIFrame function can’t quite handle 800+px/s velocities?!?!?! hehehe. Idunno, I haven’t really looked into the back end much to see how/why it works yet. But I did find that I had much better success if I toggled the visibility off during the move. I mention it because some of the posts above sound as if they may be able to benefit from it (if I understood their problems correctly).
Another thing I read above which I wanted to comment on was the ctrl-clicking. I haven’t tried any browsers besides Firefox yet, but that’s beside the point. It seems that it’s the ctrl key in general that’s DOA(pp).
I have several keyboard shortcuts programmed into my app that keep me from having to type various sequences for testing (e.g. name/password + login.click), but once I dropped the IFrame into the app, it stopped working. I can’t even ctrl+r to reload the app (which is Firefox’s coding) when I’ve made a change.
I’m actually quite suspicious (convinced actually) that it’s really the wmode that’s causing this “lack of ctrl.” If I “forget” to jump over to Dreamweaver and resave the opened version of the wrapper (with the wmode=”opaque” statements in it) then the ctrl+r and other shortcuts work fine. Apply the wnode changes–no more ctrl key. (This is how I’ve been adding the statements into the wrapper–cuz I don’t know anything easier.)
Well that’s all I have to say about that, but I’ve only messed with it (with any success) for about an hour.
Thanks,
Todd
Todd,
Phew big comments. Lets see if I can work my way through them.
- I am thinking that you downloaded the project file from the ‘view source’ pages. I should have pointed out that this is stripped of some of the file settings that you need. I have rectified that and I apologise. For everyone else..only download the full project from the project page links. I somehow imagined that this was obvious when it clearly wasn’t
- A Drag-Panel is a custom component? The component jumps through a few hoops to try and detect it is not visible. Something the drag-panel is doing is obviously breaking this.
- I have never got to the bottom of the security error. It doesn’t appear when the application is deployed and accessed through a web server. It never appears when compiled under Flex3, even when you run the app from FlexBuilder.
- I knew the wmode screwed up keyboard control of the datagrid but the Ctrl key sounds like a new one to me. It sounds like I will have to update the bugs section on the ‘Projects’ page entry. Thanks for pointing this out.
Long detailed comments Todd, thanks.
Hello,
This IFrame component is really good work !
There seems to be a slight incompatibility with Firefox 3 Beta (tested under Linux), maybe due to the Gecko 1.9 update implemented in it :
When using the ’source’ property to display a html page, the component works fine, but when using the ‘content’ property to display directly some html content, nothing is displayed. The same application works perfectly under Firefox 2.
The only difference between the two behaviours is the html tag inserted ( instead of ). Firefox 3 seems to render the tag in a different way, that prevent the content from being displayed.
Any idea of a missing attribute or style which could solve this problem ?
Thanks a lot !
Max
Max,
I will look into this. Thanks for the heads up.
Al.
Thanks for your answer, Al !
I finally fixed the problem, which was due to a missing DTD (the strange thing being that Firefox 2 doesn’t need it).
By the way, your test page at http://ccgi.arutherford.plus.com/website/flex/iframe/IFrameBridgeTest/ doesn’t have any DTD, which causes some problems with Firefox 3 if you try to modify its behavior using the ‘content’ property instead of ’source’.
Hoping that this could help developers save some time working with IFrame component under Firefox 3.
Thanks for having shared your work !
Max
Max, Good investigation work. Can you tell me what the DTD is that’s missing? I will modify the demos accordingly.
Thanks again.
Al.
You simply have to add the following line at the beginning of the html wrapper file :
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
with lesser and greater symbols around (I didn’t write it, otherwise it would have been interpreted as XHTML in this comment)
then change the second line :
html lang=”en”
into :
html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”
This will prevent the problem described with Firefox 3 when using ‘content’ to display html within IFrame.
Hoping everyone will enjoy this very useful component !
Max
Hi,
First of all, i am rather new to Flex. So if my question is stupid, please ignore it.
I compiled your SimpleHtml example using the Flex 2 sdk in Linux( command line). The IFrame component does not sit quite on top of the content area( whether it is a child of the mx:Panel container or ,directly, a child of the mx:Application container. ). I needed to include left=10, top=10 to the IFrame tag to position it properly. Is there anything i am doing wrong?
Max,
I see nothing at http://16-bits.com/HTMLTest/HTMLTest.html.
I am using Firefox 3 beta 5 and Flash Player 10 beta. Firefox 2 does not work either.
Jarav,
Looks like Max’s demo is no longer active. I see nothing either.
As to your other question – you should be able to position the iframe okay. If you send me the modified demo in zip form I will have a look at it.
Al.
Al,
The way I made the IFrame move with a TitleWindow opened with PopUpManager was adding a handler for the event MoveEvent.MOVE on the window, and in this handler I call IFrame.moveIFrame(). I had to change the visibility of IFrame.moveIFrame() to public.
A problem appears when you put one window with an IFrame over another window with an IFrame. I decided to hide the IFrame of the window that is below.
Gabriel
Hey now,
Is it possible to get Flex components to appear on top of the content that is loaded through the IFrame? In my example, I have an IFrame located within a TabNavigator. I have a button located outside the TabNavigator that spawns a PopUp for a debug console; however, this content is always behind the content loaded in the IFrame. I have tried changing the z-index of the IFrame and added another div to the wrapper html so I could set the z-index of the main Flex app with no luck. Any ideas?
Ted,
Is it not possible to have any Flex/Flash elements appear in front of a visible IFrame. The reason for this is that the IFrame is a hole punched through the Flash layer to the Browser. The solution is to set the frame visibility to false when you have a popup in front of the frame contents. You can see this technique in action in the simple IFrame map demo here:
http://ccgi.arutherford.plus.com/website/flex/iframe/IFrameMapDemo.zip
The about box switches the visibility of the map off and then reinstates it when the popup is closed. You can test for the appropriate tab of you are using a viewstack.
Al.
I was having a problem when embedding more that one iframe, specifically in IE which didnt seem to be hiding the iframe when the visibility was set to false, I modified the SHOWIFRAME function to include:
document.getElementById(frameID).style.display=’inline’;
beneath the style.visibility and vice versa for the HIDEIFRAME.
I also wanted to reload the Iframe with the original url if it was hidden then re-shown, so I moved the call to showiframe into the commitProperties and put a call to invalidateProperties into the visible setter so that it loads and shows the iframe when visible is set to true.
Is it possible to hide the html generated if someone goes on the source and run the swf directly? If you go to any of the Demos, if you type the url straight to the sef you see this on the top:
html>
The only solution I found (not really a solution) was to set the bg to black so it matches the color of the text.
Thanks!
In the downloaded example, in the HTML template shouldn’t the > be after “opaque” and not after …getflashplayer” within the object tag ?
Hi Ced, Do you know what? I don’t know. I looked back at the notes here:
http://www.communitymx.com/content/article.cfm?cid=e5141
and I am none the wiser. I need to check out the circumstances when this would come into play. If you know for sure that this is incorrect then please comment back and I will change it. Well done in spotting this!!
Al.
Hi…i m using this(Iframe) component.inside my main application…its work fine in all browsers except firefox for windows whats the reason?..entire screen appears to black….
pratap,
Please read the ‘READ ME BEFORE USING’ section in the the ‘Projects’ page. Have you set the wmode=opaque setting??
Al.