Question

I found and am using the following stackoverflow question and answer here. I’m using the iFrame inside of an iFrame that refers back to the parent domain in order to communicate my height back to it. I completely understand the concept and had this implemented fairly easily. The issue is that when I try to get the $(document).height() from jQuery as such or just by document.body.scrollHeight I’m seeing strange results in all browsers when my page is referenced inside of the iFrame.

Here is some background to what is happening on my page. I’m making some ajax calls to search a service of a third party provider and generating html inside of my page based on the results, pretty standard stuff. By the way, I am waiting for my html to be added to the DOM before grabbing the height of the document. Here are the results from $(document).height() when my page is inside of the iFrame.

FireFox 10.0.2 where the height picked up is almost 1000 pixels or more smaller than the actual height of the document.

Google Chrome 18.0.1025.162 will most of the time pick up the correct height. Sometimes the height is smaller by only a few hundred pixels.

Safari 5 behaves like FireFox does as well.

I’ve seen many blog posts with code showing the behavior. It doesn’t matter if I use jQuery or what is available to me with the javascript document object. I’m always seeing inconsistent results coming back from either one of those calls. I have to believe other people that have used this technique have ran in to this.

I don’t need to show my code for the iFrame resize or helper iFrame since these are functioning as expected. The main code I want to show is how I start the resize process from my search form after the ajax event and dom manipulation has finished:

function resizeMe() {
    var iFrameHelper = $("#iFrameHelper");
    iFrameHelper.attr("src", iFrameHelper.attr("data-url") + "?height=" + $(document).height() + "&cacheb=" + Math.random());
}

Answer 1

So I ended up figuring out what the issue was. The $(document).height() piece was working correctly. The issue is all about timing. The items that I render in the page after the ajax call has completed contain images that cause requests to go out from the page to get the images. There was no defaulted height set on the images therefore the height was not being calculated properly before I changed the src attribute on the iFrame inside of my page which kick starts the resize on the parent.

What I ended up doing was just defaulting a height for all of my images since they share the same dimensions. I was blaming iFrames instead of myself. 2 days of pulling my hair out for such a simple reason.

I hope this helps somebody else out in the future.