Using Javascript on the Content of an iframe

Question

I have a page with some tabbed content on it. A couple of the tabs contain iframes and I use a handy little script to resize the iframes to suit their content. It's

function autoResize(id){
    var newheight;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
    }
newheight=(newheight)+40; // Makes a bit of extra room
    document.getElementById(id).height= (newheight) + "px";
}

Today I have added a little jQuery script to stop the tabbed area showing until it is fully loaded. This stops the tabs doing an unsightly little jump when the loading is complete. This is the script:

$(document).ready(function(){
    $("#tabber").hide();
    $("#loading").hide();
    $("#loading").fadeIn(1000);
 });
$(window).load(function(){
    $("#loading").hide();
    $("#tabber").fadeIn(300);
 });

The loading div contains a loading icon and the tabber div is the entire content of the tabbed area.

This script is also stopping the iframe resizing working. In order to understand it better I added another script:

function checkResize(id){
      var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
      alert(win);

Sure enough, "win" comes up as zero. If I delete the $("#tabber").hide() line, "win" shows a sensible number for the height of the iframe.

Is there another way of making the two things compatible?

Vlad produced the solution: I had to use the jQuery version of visibility=hidden instead of the jQuery version of display:none. That doesn't actually exist in jQuery so I found out from another StackOverflow question how to write my own functions to do it.

The final script is

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
        });
    };
}(jQuery));
    $(document).ready(function(){
        $("#tabber").invisible();
        $("#loading").hide();
        $("#loading").fadeIn(1000);
     });
    $(window).load(function(){
        $("#loading").hide();
        $("#tabber").visible();
     });

My thanks to Vlad, and also RAS, for taking the trouble to look at my question and give their ideas.

Did you try to wrap your resizing inside document ready or window load? — RAS, Mar 19 '13 at 18:20

score 0 · Accepted Answer · answered Mar 19 '13 at 18:35

It seems that you can't get the correct height or width of an iframe without setting it being visible first. That is when its style's display is set to none (by calling the hide() method). Have you tried to set the 'visibility' to hidden instead and see if it makes a difference?

If not, then one of the solutions would to cover the tabbed area with an absolute positioned div and then hide that div and resize the tab when an iframe has loaded:

$('#iframeID').load(function () {
    $('#coverDivID').hide();
    checkResize(); // or autoResize();
});

Or, instead of the covering div you can make all the work inside the iframe. It means not to show iframe's content until it's fully loaded. That is, in the iframe have a small div where it shows loading progress (an icon or a "Please, wait..." message). When iframe's content is loaded, it would remove the progress div and show its content. Then use the method above to resize the tab. This would work if the iframe's content doesn't have a visible border or background different from the container. Otherwise you'd still see a jump.

You're a Top Man, Vlad. That was the solution. See my edit of the original question. — TrapezeArtist, Mar 19 '13 at 22:42

Using Javascript on the Content of an iframe

1 Answers1