iframe 动态高度调整大小

Question

您好，我目前有 2 个页面（index.html 和 iframe_contents.html）。两者都在同一个域中。

我目前正在尝试让 iframe 根据内容大小动态调整大小。

我用它来帮助我http://benalman.com/code/projects/jquery-resize/examples/resize/，如果 iframe_contents 正文标签在 Firefox 和 IE 7/8/9 上变大或变小，它就可以工作，但对于 webkit，它只能增长，永远不会缩小

我已将其缩小到 iframe_contents.html 中的 body 标记，当内容高度发生变化时不会缩小，而只会在 iframe 中缩小。当 iframe_contents.html 不在 iframe 中时，如果我缩小/放大元素，主体的整体高度会发生变化。

这是特定于 webkit 的问题吗？

Answer 1

在这里阅读了很多答案后，他们都遇到了同样的问题，即在需要时没有将尺寸调整得更小。我认为大多数人只是在框架加载后进行一次性调整大小，所以也许不在乎。每当窗口大小发生变化时，我都需要再次调整大小。所以对我来说，如果他们让窗口变窄，iframe 会变得非常高，那么当他们让窗口变大时，它应该会再次变短。这在某些浏览器上没有发生，因为我可以使用 DOM 检查器（FireBug/Chrome 开发工具）找到的 scrollHeight、clientHeight、jquery height() 和任何其他高度在 iframe 之后没有报告正文或 html 高度更短变宽了。就像身体设置了最小高度 100% 之类的。

对我来说，解决方案是使 iframe 高度为 0，然后检查 scrollHeight，然后设置为该值。为了避免页面上的滚动条跳来跳去，我将父级（包含 iframe）的高度设置为 iframe 高度，以在执行此操作时保持页面总大小固定。

我希望我有一个更干净的示例，但这是我的代码：

        $(element).parent().height($(element).height());
        $(element).height(0);
        $(element).height($(element).contents().height());
        $(element).parent().height("");

元素是我的 iframe。

iframe 具有 width: 100% 样式集，并且位于具有默认样式（块）的 div 内。

代码是jquery，将div高度设置为iframe高度，然后将iframe设置为0高度，然后将iframe设置为内容高度。如果我删除将 iframe 设置为 0 高度的行，iframe 会在需要时变大，但永远不会变小。

Answer 2

这可能对您没有多大帮助，但这是我们在您的 iframe_contents.html 页面中提供的功能。它将尝试以一种自动调整大小、跨浏览器、纯 JavaScript 的方式调整加载它的 iframe 的大小：

function makeMeFit() {
    if (top.location == document.location) return; // if we're not in an iframe then don't do anything
    if (!window.opera && !document.mimeType && document.all && document.getElementById) {
        parent.document.getElementById('youriframeid').style.height = (this.document.body.offsetHeight + 30) + "px";
    } else if (document.getElementById) {
        parent.document.getElementById('youriframeid').style.height = (this.document.body.scrollHeight + 30) + "px"
    }
}

您可以在resize() 事件中或在更改页面高度的事件之后调用它。该方法中的功能测试应该分离出 WebKit 浏览器并选择正确的高度属性。