|
FAQ
IFrame FAQ.
IntroductionWelcome to the Flex IFrame FAQ. Here you will find information about how to implement the Flex IFrame successfully and also learn of its limitations. DetailsGotchas Basic The IFrame floats above the flash content. It will hide any flash content that enters the area bounded by the IFrame. So, no pull-down menus over the area, no pop-ups like alert or dialog boxes. It can't be done so remember this when designing any application that uses the IFrame. As a tip you can put your html view on a different tab from the rest of your application which has buttons to trigger important stuff. You can see this technique in action on some of the demos and applications linked to on the main page. 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 http://www.communitymx.com/content/article.cfm?cid=e5141 The javascript helper functions are there to orientate the html iframe/div combination so that it always matches the frame area. 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. If you create an IFrame programatically DO NOT FORGET TO ASSIGN AN ID. This is easy to do. The classic symptom of this is if you switch tabs (say) for multiple IFrames and the contents do not change. This means they are all using the same DOM elements because the id values are all the same for each set of underlying DIVS created. 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. Communication between Flex and javascript I.e. calling back into the Flex app from the page and calling into javascript from the Flex app. The way I implemented this was using FABridge. See the IFrameBridgeTest demo. So it's possible but it's not simple. Bugs Flexbuilder 2 and IE Currently the IFrame will not load local content properly under IE when run from Flexbuilder. It will work when the application is accessed through web server. The best solution is to develop with Firefox. wmode and datagrid Use of wmode=opaque (and there is no way to get round this folks) apparently messes up multiple selections with the datagrid. This might be resolved for FB3. Safari problems Some issues. I can confirm that it does work, depends what you intend to use it for. The Social Graph Browser has a page to dispay the contents of a target URL and this seems to work fine with Safari. General Over time I have seen some genuinely crazy uses for this component. Brian Deitte has a nice post about the IFrame which everyone should read here http://www.deitte.com/archives/2008/07/dont_use_iframe.htm I can't really disagree with him. Having said that. There are genuine reasons why this component is useful. |
Sign in to add a comment
I am trying to use iframe with the esri flexapi and their arcgis FlexViewer? which is a framework for supporting multiple applications. quite nice. The iframe actually works well in most cases. Any help in resolving this would be appreciated. below is the errors resulting on dropping the iframe into this app:
TypeError?: Error #1009: Cannot access a property or method of a null object reference.
and the list continues.. any idea how to fix this or if you can describe the issue?
The error is on the same line as ' Issue 9 ' in the issues list so I am sort-of assuming it's the same fault. I don't know what's causing this but if you go to the downloads section and get the IFrame v1.2 instead it should fix the problem.
Hi,
I am trying to implement your iframe solution in my application as a temporary solution to display google ads. Everything seams to work fine but the positioning of the iframe. Instead of showing where I placed it, its is showing after the application.
I am using IFrame version 1.2 after getting the same error as powersparks. Flex builder 3 on Mac os x 10.5 and firefox 3.07
you can check my result at www.onplayer.org/main.html
any idea how to fix this?
Fixed my problem.
The move iframe function was missing the "px" ending for the positioning value. I Changed as follow:
Its working good now.
This error is in IFrame 1.2 version haven't tested the newer versions.
Hi to group...
(sorry bout the neewb ? as I am new to flex develop)
Any docs/wiki which tells of what needs to be done to 'install' this into flex v3. I have the MXML files and .AS in my enviro & can compile without errors but it shows nothin. Confused... TIA //GHudd (huddleston.greg@gmail.com)
Hey JonnyBGod,
I'm trying to get the googleAds thing working too, But I'm stuck. How exactly did you add your AdSense? code? Is it part of the IFrame component? Did you set the source and contents property? I'm pretty confused.
THANKS for your help!
Hey Greg, here's some quick tips to get started: 1. The download contains directories of sample projects, try to get those working first then you can inspect to see what's going on. 2. To run the sample code for the HTMLTest project...do as follows.. 3. In your Flex workspace, File->Import Flex Project (it's under flex builder folder) 4. Select the radio button for Project Folder (not Archived..that's for projects that are zipped up using the flex builder export function). 5. Navigate to downloaded folder : ...\fb3_1_3_2\fb3\HTMLTest and it should load the project just fine. Now you should be able to run it.
6. In regards to getting the iframe.as component into your own project.... all you have to do is cut and paste the iframe.as file into your src folder of your project (or a sub directory under src), then reference it properly in your mxml code by adding a xml namespace attribute to your main component...like follows:
xmlns:local="" xmlns:myComponents="myComponents."
<local:IFrame id="test1"
quick update above....the sample xmlns I tried showing is screwed up cause of the wiki markup. there is supposed to be an asterik in the quotes for 'local' and another asterik after the period in myComponents.
Look up xmlns in the flex help docs for more info.
Follow up!! I finally realized that I needed to create a separate mini-web page to paste my adcode in, THEN use that webpage as the source for my iFrame.
Later!
Thanks to coneraets.deittes.rutherford for putting this out there. Need to say the 1.2 version works well. I came across a rare case in ie7, on a dell xp sp3, the iframe is off set by the http contents. It's not repeatable on other machines, hard to duplicate hence troubleshoot. Microsoft has a very simlar iframe issue and fix reported for ie7 but pre sp3! So the apparent fix does not work or solve the problem. Has anyone seen this problem and found a fix?
opps.. okay.. dumb.. we left off the WMode=Opaque. seemed like all worked fine without this.. need to check to see if this resolves the apr06 issue.
Hi, awesome work here Alistair!
Is there a way to use this to render xml that is in memory? It works fine if I have the .xml file on the file system and can point the "source" attribute to it, but is there anyway to just apply the xml content?
I faced the same error messages as powersparks on Feb 09, 2009.
I noticed two things are important if you use 1.3.2: - you have to run the examples on a server (so don't run it straight from your download folder) - in the project settings, you have to tick 'Enable integration with browser navigation'
Not sure if these points are also valid for 1.3.3.
How can I do transperetn html page which displayed over Flex IFrame in IE? Thanks.
Is possible to use click="" form mxml ?
Hi all How can I access a javascript inside ifram from flex. I have tryed this
ExternalInterface?.call(myiframid.document('myjavascript'));and
ExternalInterface?.call('window.framesmyiframeid?.myjavascript');can anyone help me?
Thanx Frasse
Hello,
i have the same problem than frasseff. I can't call a javascript function of the HTML page which is loaded in the Iframe. Is someone has a solution ?
Hi
I have been working with iFrame. I had different issues but cold work around them. Now the one I cant resolve: I added the full screen mode to the app. When the application is in full screen mode the iFrame dissapears. Any tolds on that? Thx a lot Greetz
some problem with ivanjacobs2... in fact the iframes don't move well. I have iframes in a movable+resizeable window. When ever i move it the iframes trail behind, and when i do some combi of resizing and moving, the iframes eventually pop back.
Back to the fullscreen problem, no amount of resizing or moving will resurrect the iframes...
Greetings all. I too am getting frustrated at not being able to leverage any javascript referenced in the iFrame. I have tried many different situations all to no avail. ExternerlInterface? will not see the code at all and if I use the callIFrameFunction in iFrame.as 1.3.3 it will not call the Javascript either. The function is leverage but with some debugging it keeps getting halted at the following code area:
if (iframeContentHost != appHost) {
}The problem is that this is not a correct statement as all my code is in the same location so not possible for it to be a cross-domain issue. I read on one of the issues that this may be caused by local development and if pushed to a remote server then it works. This is also an incorrect statement as I have done that and still no response to accessing javascript in the iframe.
Does anyone at all have any working solutions to this trying problem?
Hi everyone, I have been trying to use iframes inside Flex in order to make possible to include a html IFRAME in flash projects. The idea is to build a .swf that contains a specific iframe into it, and then, load this .swf in some flash projects by using the component UILoader. The problem is, despict the examples from this project run normally, I don´t know which steps I should take in my flash projects to include the swf to the UILoader. Some (previous?) solutions to this one in this site tells us to include some javascript functions in the html file that opens our flash, but for the solution presentend in this site, what must we do???
I see different behaviors in Mac OSX and Windows Vista. In Vista the IFrame controls don't show up... or to be exact look completely shrunk to 1px... Any ideas? Yes, I have wmode=opaque
If you want to call javascript functions from the Flex side see the IFrameBridgeTest demo. The only way I have tried and got working is to use FABridge.
Hi,
I am having some issue during communication.
1. I launch a JSP inside a IFrame - Flex.
2. I need to communicate back with some notification to flex app.
3. How do i achieve this communication back to flex
I do not need a redirect but just a notification (something similar to call back function). Tried using diff options like document'flexObject'?.functionToBeCalled but with no success.
Any suggestions highly appreciated.
Thanks,
SK
you need to have a listener already established.. this can be created using the FAbridge tool or you need to code the listener. but this is similar to alot of the above issues starting with the "Comment by frasseff, Jun 09, 2009 :"
your iframe id needs to be the same as what is created in IFrame.as version 1.3.3 around line 400.
// Generate unique id's for frame div name var idSuffix:int = 0; while (idList[id + idSuffix]) { idSuffix++; } frameId = id + idSuffix; iframeId = "iframe_"+frameId; idList[frameId] = true;Note that "iframe", your frame "id" and "idSuffix" (which is integer starting with 0) make up the entire string to identify your document in the DOM.
so if in Flex you have your iframe component found in some namespace, say "ns1" the xml for the iframe would be:
<ns1:IFrame id="myiFrame" />
and assume for now idSuffix = 0
then the actual id is "iframe_myiFrame0"
in your iframe embedded page you have a
function myFunction(var1,var2){ foo = var1 + var2; return foo } then to call from AS3 script, within some function make your call:
that's a simple way to do it.
Hi,
I can't find version 1.3.3 in the downloads. Did it get removed due to bugs or something?
Thanks.
-James
Hi,
is it possible to use links with parmeters like www.xyz.com/index.html?param1=1¶m2=2 ?
First testing ends in errors.
Thanks TP
Hi, I ran through the same issue, I solved by using this way: www.xyz.com/index.html?param1=1&param2=2
Helllo, I have downloaded the 1.1.4 and when I try to run the example mxml's in Flex 3, I see a blank page. It looks like something flahes in the beginning and then it is just blank. Please help, what am I doing wrong? Thanks!
Do you mean the whole page or just the iframe ? Did you add "wmode=opaque" to your HTML template ? If yes, What OS/browser/Flash version do you use ?
Hello, I have downloaded the 1.14, and I added "wmode=opaque" to my HTML template. I run the IFrameWithLoadIndicator example, and saw two frames. However, I clicked inside one of frame, then clicked outside of frame, the conten in two frames were gone and turned into blank page.
I used Flash Player Version 10 and Flex Builder 3.2.
How do I fix this problem? Thanks for your help
Lucy
I'm having an issue using the iframe in a tabnavigator. When i switch back and for between the iframe tab and other tabs the screen goes blank. I have to minimize and maximize the browser to force a redraw or drag a popup around to force a redraw. It seems to only happen i the environment below.
Mac OS. Firefox Browser.
Hi, i ve problems using iFrames with flex 4 sdk does anyone have any idea how to make iFrames work with this version?
how can we embed pdf into this iframe? I've tried pointing the source to a local pdf file but it didnt work...
Hi
This is a great component , I have used it to display streetview in a googlemap marker. If anyone is interested let me know where and I'll post the code I have so far.
Anyhow, I have a problem. I want to use actionscript to add a iframe to my application : I do the following:
var iframe:IFrame = new IFrame();
// add my iframe to my canvas in appBut no iframe appears, I know something is happening because the status bar shows I am requesting google.com, but the iframe will not diaplay. I have set wmode =opaque ect.
Thanks for any help
Hi dthorneycroft, I suggest you ask your question to the flex-iframe Google group, it will be more cumfortable. (Same thing for everyone who has a question). For your problem, you should pass the id directly to the constructor.
For your example, it sounds interesting, can you post it to the Google group too, so we can discuss it and may be integrate it to the samples ?
OK Thanks for your reply and apologise for posting incorrectly
Above message is coming when I am running this locally from my FB 3
I have the same issue with IE when running the application locally with FB3. More especifically I am running IFrameDemo example, even If I remove the iframe from the sample application I get this application with IE
"To help protect your security, Internet Explorer has active content that could access your computer"
The sample runs well with Google Chrome and Firefox. Other applications built with FB3 also run with IE with no problem. How can I solve this with Iframe?
IFrameDemo works with FB3 in debug mode. When I "Export release" the project, the demo does not work when I double click on the html file on the bin-release folder.
Any clue or hints?