自动调整大小不起作用答案

【问题标题】：Auto Resize not working自动调整大小不起作用
【发布时间】：2016-09-05 18:23:42
【问题描述】：

我有一个 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>

【问题讨论】：

可能是因为默认高度不能小于 300px，尝试删除 height 属性并通过在 css 中为 #foo 添加 min-height 来替换它。如果它没有帮助 - 在 plunkr 或其他服务中创建一个代码 sn-p

标签： javascript jquery iframe autoresize window-resize

【解决方案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"; 
}

【讨论】：