CODEWITHSUNDEEP
firefoxiframeheight
Dave Stein
Dave Stein

Reputation: 9316

firefox not giving right height within iframe

This bug is similar to:

jQuery reports incorrect element height in Firefox iframe

He gets back an incorrect number. My difference is that when my frame loads - it's giving zero.

I am trying to send the height of its contents to the parent window. It keeps sending back zero on load. If I set an interval for 50ms, I'll see the number increase up until the correct number. Zero is ALWAYS the first number given before the interval.

At least one of the elements inside has a predefined height - some with css and some with inline. So there is no reason it should be sending back zero if elements are still loading.

If I console.log $('#element'), the element looks hidden ( faded in latest versions ). If I run this in Chrome it runs perfect. I also tried native clientHeight which also gave 0, so I don't think it's jQuery.

EDIT: The elements are added via JS before I try to calculate the height. Them not being on page at start might be an issue.. going to try and make a simple demo page to post.

This does NOT happen on Firefox 4 beta

Upvotes: 2

Views: 841

Answers (3)

nanoamp
nanoamp

Reputation: 118

I know this is an old question, but I had a similar problem in Firefox, with an iframe pre-loaded into a Bootstrap modal, which was truncated when finally shown. I can't calculate the correct height until then, but I can make it resize reasonably seamlessly (to the end user) with a bit of jQuery. I'm answering here in case others follow on the hunt for a solution to a similar problem:

$("#myIframe").load(function() {
  $m = $(".modal-body");
  var mh = $m.height();

  var wait = setInterval(function() {
    var ih = $("#myIframe").contents().find("body").height();
    if (ih == mh) {
      clearInterval(wait);
    } else if (ih > 0) {
      clearInterval(wait);
      $m.animate({ height: ih });
    }
  }, 50);

  $(".modal").modal("show");
});

The idea is that when the iframe is loaded, if a browser calculates its height is 0, then I loop until its reported height changes, and then smoothly animate the container size to fit.

Upvotes: 3

Dave Stein
Dave Stein

Reputation: 9316

The iframe is display: none at the time of the calculation because I didn't want to show it until everything is set. So even though it's technically a different window, it's still thinking the parent of the elements is display none.

Upvotes: 2

clifgriffin
clifgriffin

Reputation: 2053

Without seeing your HTML, jQuery, etc it's hard to say for sure.

I will say that I've had luck using offsetHeight when the height being returned doesn't seem to be accurate. Have you tried this?

EDIT: Another thought: I've noticed in the past that accessing an IFRAME via JavaScript before the contents are fully loaded can be problematic. Just something to keep in mind.

Upvotes: 0

Related Questions