隐藏iframe的内容高度

就像标题所说，我试图设置一个隐藏的iframes高度来匹配它的内容，但我一直得到非常不正确的高度。隐藏iframe的内容高度

我正在预加载一个新的（隐藏的）带有内容的iframe，我需要在iframe设置为由用户显示之前设置高度。

我一直在这样做的框架，可以很容易地看到很长一段时间，但现在，当它们被加载时，框架被隐藏起来。我已经浏览过SO的每一个角落，并尝试过很多基本功能的变体，但没有运气。

我试着离开iframe可见，设置高度然后隐藏它，但帧的快速闪光是没有吸引力。有没有一种方法，我只是不知道从隐藏的iframe中获取ACTUAL内容高度？

打开jquery或纯js的想法。以下是我一直在使用的两个最常见的示例。

对此的任何建议将不胜感激。先谢谢你。

// example 1 
function resizeIframe(obj){ 
    obj.style.height = 0; 
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; 
} 

portalDiv.append('<iframe src="" scrolling="no" style="display:none;"></iframe>'); 
$('iframe').last().attr('src', '/content.php').load(function() { 
    resizeIframe(this); 
    // should return 363px 
    // returns 1531px :(
}); 

// example 2 
portalDiv.append('<iframe src="" scrolling="no" style="display:none;"></iframe>'); 
$('iframe').last().attr('src', '/content.php').load(function() { 
    var contentHeight = $(this).contents().find(".container").height(); 
    $(this).height(contentHeight+"px") 
    // should return 363px 
    // returns 1531px :(
});

来源

2015-10-05 xxstevenxo

尝试使用'style =“visibility：hidden;”'而不是'display：none;''。这将呈现iframe，就像它有布局一样，所以你的高度/宽度计算应该是准确的。 – murdock

谢谢，我会给它一个镜头。可见度是否与ie8一起工作？ – xxstevenxo

是的，它已经成为CSS规范多年的一部分。它甚至适用于IE6 :) – murdock

Per @ murdock的建议我用一种可见性和显示风格的组合来实现我所期待的结果。

我之后使用了display attr，因为即使有可见性，父体的高度也会增加，除非该元素设置为display：none;

这里就是我所做的

portalDiv.append('<iframe src="" scrolling="no" style="visibility:hidden;"></iframe>'); 
$('iframe').last().attr('src', '/content.php').load(function() { 
    var contentHeight = ($(this).contents().find(".question-table-container").height()+30); 
    $(this).removeAttr("style").hide().height(contentHeight); 
});

希望这可以帮助别人，将来别人。

编辑：起初，我仍然有相当多的页面退缩。所以我删除了可见性风格，并决定在我的CSS中将高度设置为0px。然后我得到了内容高度，隐藏了iframe，并设置了iframes的高度以匹配内容。祸不单行！

portalDiv.append('<iframe src="" scrolling="no" style="visibility:hidden;"></iframe>'); 
$('iframe').last().attr('src', '/content.php').load(function() { 
    var contentHeight = this.contentWindow.document.body.scrollHeight; 
    $(this).hide().height(contentHeight); 
});

来源

2015-10-05 19:50:10 xxstevenxo

隐藏iframe的内容高度

回答

相关问题