显示和隐藏大小为内容的iframe

Question

嘿，我有一个iframe，我正在使用以下脚本调整其内容大小。我想用两个按钮显示和隐藏这个iframe，但是当其隐藏iframe的宽度和高度时不计算，所以当我单击显示按钮时它不显示，因为宽度和高度仍然设置为0.

我很新jQuery和JavaScript，所以帮助将不胜感激。

<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> 

Answer 1

您可以在ShowFrame点击调用resize函数。

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

Answer 2

您可以显示，计算尺寸，然后在网页重新绘制之前再次隐藏。其原因是渲染引擎和JavaScript在同一线程上运行，而JavaScript执行网页时无法重绘。

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