Iframe动态高度调整大小

iframe dynamic height resizing

本文关键字：调整 高度 动态 Iframe      更新时间：2023-09-26

嗨，我目前有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中时，如果我缩小/放大元素，body的整体高度会发生变化。

这是webkit特有的问题吗?

在阅读了这里的许多答案后，他们都有同样的问题，即在需要时不调整较小的大小。我认为大多数人只是在帧加载后做一次调整大小，所以也许不关心。我需要随时调整窗口大小的变化。所以对我来说，如果他们把窗口变窄，框架就会变得很高，然后当他们把窗口变大时，框架就会变短。这并没有发生在一些浏览器上，因为scrollHeight, clientHeight, jquery的高度()和任何其他的高度，我可以找到与DOM检查员(FireBug/Chrome开发工具)没有报告正文或html的高度较短后iframe变宽。比如body设置了最小高度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中具有默认样式(block)。

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

这可能对你没有多大帮助，但这里有一个函数，我们在什么是你的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浏览器，并选择正确的height属性。

相关文章：