Question

I have an IFrame that has dynamic content depending on what link a user clicks.

My actual code to show the IFrame looks like this:

var frame = $('#ContentFrame');
frame.attr('src', url);

// Wait until frame content finishes loading before positioning and showing
frame.load(function () {
    SizeAndPositionFrame(variables);
    frame.show();
});

As you can see, the frame doesn’t actually get shown until after the content has been loaded. This is because the size of the frame can vary, and I don’t want previous content to get distorted by the frame resizing before the new content loads.

My problem is that some of the content frame’s pages contain code in the $(document).ready() function that requires the .height() of certain objects, and in IE7 this height is 0 until the frame finishes loading the iframe becomes visible.

What can I do to either get the .height() of non-visible objects that are not visible due to the frame displaying the content being not visible?

Note: This is for an embedded IE7 web browser, so the solution must be compatible with IE7

Answer 1

Make the iFrame visible, but not inside of the viewport.

frame.css({
    position: 'absolute',
    left: '9000px'
});

However, it would be better to do this with a class so that you can simply remove the class.