jQuery 检查 iFrame 高度并调整答案

【问题标题】：jQuery check iFrame height and adjustjQuery 检查 iFrame 高度并调整
【发布时间】：2016-12-22 04:27:59
【问题描述】：

我正在尝试根据 iFrame 中内容的大小来更改 iFrame 的大小，挑战来自于用户开始在 iFrame 内单击以检查 iFrame 的状态我使用间隔像这样检查内容大小

var checkHeight = setInterval(function(){
checkHeight();
},1000);

function checkHeight() {
  var height = $('.foo').contents().height();
  console.log(height)
  $('.foo').css({
  'height': height + 'px'
  });
}

这很好，当用户转到内容为 600px 的页面时，iFrame 设置为 600px，但是当用户转到高度为 200px 的页面时，iFrame 退出并设置为 600px，我不明白为什么 jQuery 保存了最高的高度数？在每个函数调用上将值设置为零会使页面跳动。

【问题讨论】：

标签： jquery iframe height

【解决方案1】：

我正在使用类似的东西：

$(function(){
    $('#foo').load(function(){ 
        $('#foo').contents().find("body").on('click', function(event) { 
            runAfterTimeout('foo');
        });
    });
});

function runAfterTimeout(id) {
    setTimeout(function(){
        autoResize(id);
    },1000);
};

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

然后在 iframe 上添加：onload="autoResize('foo')"

【讨论】：