Javascript iframe动态高度调整

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

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

我用它来帮助我，如果iframe_内容主体标签在Firefox和IE 7/8/9上变大或变小，它就会起作用，但对于webkit，它只能增长，不能收缩

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

---

这是webkit特有的问题吗？

这可能对您帮助不大，但我们在您的iframe\u 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会变得很高，那么当他们把窗户弄大的时候，它应该会变短。在某些浏览器上没有出现这种情况，因为scrollHeight、clientHeight、jquery height（）以及我可以通过DOM检查器（FireBug/Chrome Dev工具）找到的任何其他高度在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将在需要时变大，但不会变小。

您可以将代码发布到吗？你给我的示例站点在Chrome（webkit）中为我工作，它可以增长，但不能收缩，但是的，我会发布到网站js fiddleah！抱歉，没有正确阅读问题。这是代码-索引是第一位，iframe内容是第二位。我还提供了一个指向我正在使用的js文件的链接。问题是，我需要父级来处理所有事情。iframe中有很多内容可能会发生更改，并且不便于处理。主要问题是，它只在内容缩小时才调整大小。。成长是可以的，这是一个好的简单的解决方案，预计它会引起一些闪烁，但它不会！