Question

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

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

我正在使用它来帮助我http://benalman.com/code/projects/jquery-resize/examples/resize/，如果iframe_contents body标记在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的宽度为：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浏览器并选择正确的高度属性。

iframe动态高度调整大小

2 个答案: