Show and hide iframe that is sized to content

Hey i have a iframe that i am sizing to its content with the following script. I want to show and hide this iframe with two buttons but when its hidden the iframes width and height is not calculated and so when i click the show button it does not show because the width and h开发者_运维技巧eight are still set to 0.

I am pretty new to jquery and javascript so help would be greatly appreciated.

<script language="JavaScript">
$(document).ready(function(){
    $(".ShowFrame").click(function(){
        $("#iframe1").show();
    });
    $("#iframe1").hide();
});

function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
</script>

You can show, calculate the dimensions and then hide again before the web page redraws. The reason for this is the rendering engine and JavaScript run on the same thread, whilst JavaScript is executing the web page cannot redraw.

$("#iframe1").show();
autoResize();
$("#iframe1").hide();

You could call the resize function on the ShowFrame click.

$(document).ready(function(){ 
    $(".ShowFrame").click(function(){ 
        $("#iframe1").show(); 
        autoResize("iframe1"); 
    }); 
    $("#iframe1").hide(); 
});