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

Question

我有一个 iframe，在可见元素的末尾添加了相当多的白色 space。事实上，我知道 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

请注意，这仅在两个页面都从同一域加载时才有效。