Home

Advertisement

Customize
Kolb Consulting / Dygel.Net

Document Height Of An IFrame

mood: annoyed
music: Zero 7 - Salt Water Sound | Scrobbled by Last.fm
Here's the key to the cross-browser issue I just tackled: the actual height of the document in an IFrame.

var getIFrameDocumentHeight = function(IFrame) {
var d = i.contentDocument; /* FF/Chrome (iframe.contentDocument) */
if (!d) {
/* MSIE (iframe.contentWindow.document) */
var w = i.contentWindow;
if (!w) { return 0; }
d = w.document;
if (!d) { return 0; }
}
return d.offsetHeight;
}

I know, I know. First question you probably had is, "Why are you using an iframe?" It's a cheap and easy way of loading an entire document into what you've currently got going. In this case, it helped untangle an upload new / manage existing items interface easier to implement. I've got an interface where I'm dynamically loading a page into an iframe and then resizing it to fit the height of the loaded document. MSIE keeps the document in a different spot in the DOM so I had to hunt it out.
Tags:

Posted on Sep. 15th, 2008 at 04:33 pm | | Leave a comment | Add to Memories | Tell a Friend

Comments


[info]kufat

There are also a lot of weird cross-browser issues with .height and .offsetHeight when you have nonzero borders, as I learned when I developed a JavaScript frontend to a server-side photo cropping utility.
Posted on Sep. 15th, 2008 09:55 pm (UTC) | | Thread | Reply

[info]meekay

I know, I know. First question you probably had is, "Why are you using an iframe?" It's a cheap and easy way of loading an entire document into what you've currently got going.

This is what XMLHttpRequest and AJAX are for.

Posted on Sep. 16th, 2008 12:35 am (UTC) | | Thread | Reply

(Anonymous)

Aye. Only I'd hammered out a couple of interfaces first and thought integration second. It's on my list of things to double back over and restructure, but I'll sleep when I'm dead, right?
Posted on Sep. 16th, 2008 12:51 am (UTC) | | Parent | Thread | Reply

[info]galactose

per sleeping when dead and your icon ... saddam hussein was hanged. how messed up is that?
Posted on Sep. 16th, 2008 02:36 am (UTC) | | Parent | Thread | Reply

[info]dygel

Actually, that was my reply about sleeping when I'm dead. I didn't realized I'd been logged out.
Posted on Sep. 16th, 2008 12:24 pm (UTC) | | Parent | Thread | Reply

[info]zarfmouse

You can find an iframe in the DOM in a cross browser way by giving it a "name". <iframe name="board"> (access its document as window.board.document). However, the offsetHeight doesn't hold the height for all browsers. Try this (i don't remember which browsers each of these cases goes with but I remember I needed to add all these cases in order to get maximum cross browser functionality): 
		iframe_document = window.board.document;
		if(!iframe_height) 
			iframe_height = iframe_document.body.offsetHeight;
		if(!iframe_height)
			iframe_height = iframe_document.height;
		if(!iframe_height)
			iframe_height = iframe_document.body.scrollHeight;
		if(!iframe_height)
			iframe_height = window.innerHeight;
Posted on Sep. 16th, 2008 03:37 am (UTC) | | Thread | Reply

[info]zarfmouse

And if what you're doing is resizing the iframe to be the same height as the document (to get rid of the scroll bar) and if you're doing it on an "onresize" event handler. You need to do something like this in order to deal with some weirdness involving the initial height (before the document inside the iframe is fully loaded) and the way the height changes as the scroll bar disappears (or reappears) (firing new onresize events, leading in some cases to an infinite loop of oscillating resizes). 
		if(Math.abs(iframe_height - last_iframe_height) < 10)
			return;
		if(iframe_height) 
			document.getElementById('board').height = iframe_height+35+'px';
		last_iframe_height = iframe_height;
Posted on Sep. 16th, 2008 03:46 am (UTC) | | Parent | Thread | Reply

[info]zarfmouse

Again, I don't remember the details of why I did this but I do remember it was important.

I wrote that JS ages ago and I know it could be written MUCH more cleanly now in my wiser years. :)
Posted on Sep. 16th, 2008 03:47 am (UTC) | | Parent | Thread | Reply

[info]dygel

For my purposes here, an onload event suffices. That will fire whenever the initial iframe document loads and whenever the subject document loads after the src property is changed. Then I don't need to muck around with the onresize event which, as you say, could create element wobble.
Posted on Sep. 16th, 2008 12:23 pm (UTC) | | Parent | Thread | Reply

[info]dygel

Actually, offsetHeight is fine. It's clientHeight and innerHeight that tend to be browser specific.
Posted on Sep. 16th, 2008 12:21 pm (UTC) | | Parent | Thread | Reply

Advertisement

Customize