Показать и скрыть iframe, размер которого соответствует контенту

Question

Привет, у меня есть iframe, который я подбираю под его содержание со следующим скриптом. Я хочу показать и скрыть этот iframe двумя кнопками, но когда его скрытая ширина и высота iframes не вычисляются, и поэтому, когда я нажимаю кнопку 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

Вы можете вызвать функцию изменения размера на клике ShowFrame.

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

Answer 2

Вы можете отобразить, рассчитать размеры и затем спрятать еще раз до того, как веб-страница будет перерисована. Причиной этого является механизм рендеринга и запуск JavaScript в том же потоке, в то время как JavaScript выполняет веб-страницу не может перерисовать.

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