content height of hidden iframe

Question

Like the title says I'm trying to set a hidden iframes height to match it's content but I keep getting very incorrect heights.

I'm preloading a new (hidden) iframe with content and I need the height to be set before the iframe is set to be displayed by the user.

I've been doing this with frames that are visible for a long time with ease but now that the frames are hidden when they are loaded it's acting up. I've looked through every corner of SO and have tried so many variations of basic functions but with no luck.

I tried leaving the iframe visible, setting the height then hiding it, but the quick flash of the frame is unattractive. Is there a method that I'm just not aware of the get the ACTUAL content height from a hidden iframe?

Open to jquery or plain js ideas. Here are two of the most common examples I've been working with.

Any suggestions on this will be greatly appreciated. Thank you in advance.

// example 1 
function resizeIframe(obj){
    obj.style.height = 0;
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

portalDiv.append('<iframe src="" scrolling="no" style="display:none;"></iframe>');
$('iframe').last().attr('src', '/content.php').load(function() {
    resizeIframe(this);
    // should return 363px
    // returns 1531px :(
});

// example 2
portalDiv.append('<iframe src="" scrolling="no" style="display:none;"></iframe>');
$('iframe').last().attr('src', '/content.php').load(function() {
    var contentHeight = $(this).contents().find(".container").height();
    $(this).height(contentHeight+"px")
    // should return 363px
    // returns 1531px :(
});

Answer 1

Per @murdock's suggestion I was able to achieve the result I was looking for with a combination of visibility and display styles.

I used display attr after because even with visibility the parent body's height is increased unless the element is set to display: none;

Here's what I did

portalDiv.append('<iframe src="" scrolling="no" style="visibility:hidden;"></iframe>');
$('iframe').last().attr('src', '/content.php').load(function() {
   var contentHeight = ($(this).contents().find(".question-table-container").height()+30);
   $(this).removeAttr("style").hide().height(contentHeight);
});

Hope this helps someone else in the future.

EDIT: At first I was still getting quite a bit of page flinching. So I removed the visibility style and decided to set the height to 0px in my css. Then I got the content height, hide the iframe, and set the iframes height to match the content. Whammy!

portalDiv.append('<iframe src="" scrolling="no" style="visibility:hidden;"></iframe>');
$('iframe').last().attr('src', '/content.php').load(function() {
   var contentHeight = this.contentWindow.document.body.scrollHeight;
   $(this).hide().height(contentHeight);
});