自動調整大小不起作用

Question

我有一個iframe，該iframe的內容發生了變化，因此窗口可以更大或更小，因此我添加了自動調整大小腳本。

此腳本可以完美運行，但僅當內容較大時才可用，如果內容更改並且小於上次，則窗口不會調整大小，並且高度相同。

我不知道怎么了 如果您有任何想法會很好。

還有我的腳本和我的iframe：

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"; 
}

$(function(){
    var f=$('#foo')
    f.load(function(){ 
        f.contents().find("body").on('click', function(event) { 
            runAfterTimeout('foo');
        });
    })
})
function runAfterTimeout(id) {
    setTimeout(function(){
        autoResize(id);
    },1000);
};

我的iframe：

<iframe height="300px" width="100%" id="foo" src="" style="border: 0px currentColor; border-image: none;" onload="autoResize('foo')"></iframe>

Answer 1

我認為您需要在每次調用onload時重置iframe的高度。 嘗試這個：

function autoResize(id){
    document.getElementById(id).height="0px";
    var newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
    var newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;

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