如何强制iframe调整大小以适应嵌入的文档？

Question

我有一个iframe，在可见元素的末尾有相当多的空格。事实上，我知道iframe正在加载我所有元素的大小，包括隐藏元素。这些元素被隐藏起来，直到一些淘汰问题得到解答，此时iframe应相应地调整大小。

我正在与之抗争的另一场战斗是，我还需要处理两个滚动条，一个用于iframe，当然还有网页滚动条。这非常俗气，不太友好。

这是我继承的问题，所以我希望有一个涉及iframe的解决方案。我也愿意探索其他解决方案，因为这可能不是最合适的。

Answer 1

要摆脱滚动条，请尝试将scrolling="no"添加到iframe。 HTML iframe - disable scroll

Answer 2

同时使用内联样式属性style="overflow:hidden;"以及属性scrolling="no"。 overflow:hidden是HTML5的合适对象，因此最好将它们混合使用。

编辑：实际上，如果它适合您的情况，请尝试使用iframe seamless布尔属性。它实际上使iframe的样式好像它是包含文档的一部分，包括没有边框或滚动条。我推荐它，因为它就像你需要完成的一站式一样，它为你工作。您可以尝试将我推荐的所有三个属性组合起来，以实现理想的浏览器兼容性。

Answer 3

在显示新元素后，您可以使用JavaScript更新框架页面中<iframe>的高度。

function resizeParent() {
    if (!window.parent) return;

    var height = $(document).height();
    $(window.parent.document).find('iframe').height(height);
}

Demo

Source of framed page

请注意，这仅适用于从同一域加载两个页面的情况。