Dynamically resizing an iframe: IE and scrollWidth

[i8beef]

Ok, I have been fighting this for hours. I have a Kludge that works, but it is ugly and (in my view) unnecessary. So here we go:

I have a page that has a Lightbox-esque effect for a fake popup that has an iframe within it, which loads a page on my site. Said pages have the following code in them to facilitate resizing the iframe (In this case, with the ID OB_PopupContent) to fit it:


function goSetDimensions() {
if (parent == window) return;
else {
parent.setPopupWidth('OB_PopupContent');
parent.setPopupHeight('OB_PopupContent');
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(goSetDimensions);


Then in my parent page, I have the following code to resize the popup box and iframe:


function setPopupWidth(target) {
var content=document.getElementById(target);
var loading=document.getElementById("OB_PopupLoading");
var width=content.contentWindow.document.documentElement.scrollWidth;
var pageSize = this.getPageSize();
var pageWidth = pageSize[0];
loading.style.visibility="hidden";
content.parentNode.style.width=width+34+'px';
content.parentNode.style.left=((pageWidth/2)-((width+30)/2))+180+'px';
content.style.width=width+4+'px';
}

function setPopupHeight(target) {
var content=document.getElementById(target);
var height=content.contentWindow.document.body.scrollHeight;
var width=content.contentWindow.document.body.scrollWidth;

if (document.all) {
content.style.width=width+'px';
content.parentNode.style.width=width+34+'px';
content.parentNode.style.left=((pageWidth/2)-((width+30)/2))+180+'px';
}

content.parentNode.style.height=height+44+'px';
content.style.height=height+4+'px';
},


There are actually two workarounds in there. The document being loaded in WAS of the HTML 4.01 doctype. When it was, Firefox would understand the following code:


var width=content.contentWindow.document.body.scrollWidth;


As soon as I switched it to XHTML 1.0 Transitional, that stopped working and I had to use:


var width=content.contentWindow.document.documentElement.scrollWidth;


to get it. Oddly enough, using document.body to get the height still worked... No idea why. Ideas?

The second one is really the crux of my issue. See how in the setPopupHeight function I go back and RESET the width for all IE browsers? This is a workaround for the problem I have been beating my head against for the last three hours.

In IE (6 and 7) the first run through of setting the width sets it to 0 at all times. This is apparently what gets returned by the content.contentWindow.document.body.scrollWidth. (Note: this is back when I wasn't using documentElement for the Firefox doctype workaround. It doesn't work with it as is now either. Or with content.contentWindow.document.getElementsByTagName("body")[0].scrollWidth).

However, once it gets into the setPopupHeight function, IE has no issue getting the scrollWidth. I tried running setPopupHeight first and then setPopupWidth: didn't help. I tried adding a throw away function which ran before setPopupWidth that simply set a variable to content.contentWindow.document.body.scrollWidth in case it only happened the first time that property was set (Tried it in the setPopupWidth function too, no go).

As an aside: When the popup is first displayed, I set the size of the iframe to 0x0. This is to workaround another issue where if the popup was brought up and resized to a LARGER size (smaller wasn't an issue, it resized correctly) prior to being brought up and (attempted) to resize to a smaller size, it wouldn't resize. Again, no idea why, but that was an issue for both Firefox and all versions of IE. Oddly enough, if I took OUT the initial resize to 0x0 of the iframe from the popup script, IE6 would ALWAYS resize the width of the iframe to a given size (Where it's getting that size, I have no idea), and IE7 would now get and resize the width without issue, except that it would also do the same thing that Firefox would if the second instance of showing the popup had a smaller width than the one before it.

So why, oh WHY, does IE decide to do this? I am completely stumped, and this workaround is messy and I don't like it and it needs to go away if I can.

As a further note, the two functions given above are actually within a namespace (MyNamespace.Popup.setPopupWidth, etc.) in case that makes some kind of difference, though it shouldn't.

So I am thoroughly confused and have no idea WHY this is all happening, or WHY my workaround works at all. So please, if anyone has any clue, I am all ears.