Question

嘿，我有一个iframe，我正在使用以下脚本调整其内容。我想用两个按钮来显示和隐藏这个iframe，但是当它隐藏了iframe的宽度和高度时没有计算出来，所以当我点击show按钮时它没有显示，因为宽度和高度仍然设置为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

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

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

Answer 2

您可以在ShowFrame上调用resize函数。

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

显示和隐藏大小适合内容的iframe

2 个答案: