View Full Version : Iframe Help - Totally and utterly stumped!

11-06-2007, 08:25 PM
As I said, I need help with my iframes. I need my iframe to autmatically resize itself according to the contents of the page that is currently being shown inside it.

Obviously, I doubt you need me to tell you that this is possible, but I have tried about ten methods from various sources, all claiming that their's works, but none of them do. Some of the fail to resize it, and others simply fail to show the frame at all! I'm totally and utterly stumped!

Also, if it turns out that there's another way, a method that would produce the same effect, I'll try that too.

Thank you in advance, MrRSMan.

11-06-2007, 10:01 PM
First of all, are the pages (the 'external' pages) you are showing in your iframe from the same domain as the page (the 'top' page) with the iframe on it?

If not, you are out of luck as far as javascript only goes. Javascript doesn't allow for information sharing across domains. The resizable iframe and other similar approaches like Ajax content importation all require this sort of communication, so the pages must be on the same domain.

If the pages are on the same domain, tell us more about the specifics, like what kind of pages they are, and how much control you have over their layout, and if they have other scripts on them. Either iframe or Ajax or neither might be best.

There are many possible reasons why you may be having problems so, if the pages are on the same domain, I would want to see them before commenting too much more:

Please post a link to the page on your site that contains the problematic code so we can check it out.

11-06-2007, 10:09 PM
You could try the following:

In the parent frame, include a function like this one:

function getDimensions()
// suppose the iframe's id and name are both 'child_frame'
var iframe = document.getElementById('child_frame');

var iframe_body = top.child_frame.document.getElementByTagName('BODY')[0];

iframe.style.height = iframe_body.scrollHeight;
iframe.style.width = iframe_body.scrollWidth;

Then put a transparent gif at the end of the <BODY> tag of the page inside the iframe like this:

<img src="../images/trigger.gif" onLoad="getDimensions()"/>

This should resize the iframe to the desired size, or at least something similar.