How to get height of iframe contents as it changes?

Question

I have an iframe that loads in a page from my website and I need to set it's positioning to the center of the page dynamically based on the height of the iframe's content, and I have had no issues with the code that I am using except that the height of the iframe's content will never return a value lower than what it is if the content get's smaller (if that makes sense).

The js recognizes when the content height grows, but not when it shrinks.

E.g. if I have a page that is 400px high, and then some content dynamically changes to 420px, my code will recognize that it is 420px high, but then if it changes to 350px, for instance, my code will still see it as being 420px high. How do I fix this?

Code:

function place()
{
    var w = $(window).width();
    w-=1000;
    w/=2;
    if(w<12)
    w = 12;
    $("#div").css("left",""+w+"px");
    $("#closeDiv").css("left",""+(w-12)+"px");

    var h = $(window).height();
    var ifh = document.getElementById("inner").contentWindow.document.body.scrollHeight;
    document.title = ifh;
    h -= ifh;
    h /= 2;
    if(h < 20)
    h = 20;
    $("#div").css("top",""+h+"px");
    $("#div").css("height",""+ifh+"px");
    $("#closeDiv").css("top",""+(h-12)+"px");
}

The document title continues to show the 420px, even when I know that the content is less than that. The same problem occurs for .offsetHeight.

Thanks for your help!

SOLUTION UPDATE

Okay, so I used the code in the answer I marked as solving the problem, as I did use it and it deserves credit for helping me solve this problem, but the actual problem that was involved here was that I had the height of the iframe set to be 100% of the container box; as soon as I set it to 99%, that fixed the problem. Not sure why...but hey!

Thanks for all of your help!

Possible duplicate http://stackoverflow.com/questions/525992/resize-iframe-height-according-to-content-height-in-it — Andre Pena, Nov 15 '12 at 21:12
It's not a duplicate of that question as that is asking how to get to what I already have :) — Liftoff, Nov 15 '12 at 21:13
interesting in solution. wondering what the page code looks like — SpYk3HH, Nov 15 '12 at 22:22

SpYk3HH · Accepted Answer · 2012-11-15T21:22:28.943

0

Try something like:

var iHeight;
if ($("iframe").length > 0) iHeight = $($("iframe")[0].contentDocument || $("iframe")[0].contentWindow.document).height();

Although good old fashioned ele call should work:

var iHeight;
if ($("iframe").length > 0) iHeight = $("iframe").height();

edited Nov 15 '12 at 21:22

answered Nov 15 '12 at 21:16

SpYk3HH

22,272
11
70
81

Same problem. It recognizes when the height of the iframe content grows, but not when it shrinks. – Liftoff Nov 15 '12 at 21:20

How to get height of iframe contents as it changes?

1 Answers1