Javascript 动态调整Iframe的大小

我可以看到这个问题已经被问过好几次了，但是提议的解决方案似乎都不适用于我正在构建的站点，所以我重新打开了这个线程。我试图根据iframe内容的高度来调整其大小。包含iframe的页面及其源页面都存在于同一个域中

我已在以下每个线程中尝试了建议的解决方案：

我认为上述解决方案不起作用，因为在引用body.clientHeight时，浏览器实际上并没有确定文档的高度

以下是我正在使用的代码：

    var ifmBlue = document.getElementById("ifmBlue");
    ifmBlue.onload = resizeIframe;

    function resizeIframe()
    {
        var ifmBlue = document.getElementById("ifmBluePill");
        var ifmDiv = ifmBlue.contentDocument.getElementById("main");
        var height = ifmDiv.clientHeight;
        ifmBlue.style.height = (ifmBlue.contentDocument.body.scrollHeight || ifmBlue.contentDocument.body.offsetHeight || ifmBlue.contentDocument.body.parentNode.clientHeight || height ||  500) + 5 + 'px';
    }

如果使用fire debug调试脚本，则iframe.contentDocument的主div的客户端高度为0。此外，body.offsetheight和body.scrollHeight为0。但是，在脚本完成运行后，如果我检查HTML iframe元素的DOM（使用fire调试），我可以看到主体的clientHeight是456，内部div的clientHeight是742。这使我相信，在激发iframe.onload时，这些值尚未设置。因此，根据上面的一个线程，我将代码移动到iframe源页面的body.onload事件处理程序中。这个解决方案也不起作用

非常感谢您提供的任何帮助

谢谢

---

CJ

您移动了处理程序？也许您也应该将函数移动到内部框架，以便在获取高度值时直接引用主体而不是框架对象。。。然后调用parent.set height函数

另一个技巧是，设置超时10毫秒后调用函数

我记得我曾经遇到过这个问题，但我使用IE的getBoundingClientRect（）来获取内容高度，检查mozilla开发中心是否有类似的内容，这只是一个提示，我没有研究它

另一方面，什么是IFMBluebill？是iframe吗？还是在里面放一个div？为什么要引用div的“contentDocument”？

DynamicDrive有，我认为它符合您的要求

现在还有一个问题

---

2011年更新： 我强烈建议使用AJAX而不是类似的东西，特别是考虑到动态调整iframe大小只在同一个域中工作

---

尽管如此，这还是有点不确定，所以如果你绝对必须使用AJAX而不是标准页面加载，那么你真的，真的应该使用像

history.pushState

（并且将标准页面加载作为不支持它的浏览器的后备）。有一个jQuery插件可以为您处理这些内容，由GitHubber编写，名为，他们仅用于回购导航。

顺便说一句，DynamicDrive改进了他们的脚本，即使iframe内容发生变化，也能始终调整大小：

从他们的页面：

这是原版的第二版 Iframe SSI脚本，与 原始脚本可以让您无缝地 在页面上显示外部内容 通过IFRAME。它是通过 动态调整IFRAME的大小，以便 包含的页面的高度 在它内部，消除任何可能的 IFRAME滚动条在 贴身地展示整个外部 内容。将其视为SSI（服务器） 侧包括）使用DHTML模拟！ 此脚本在IE5+和 NS6+和其他浏览器支持 可以选择完全隐藏 正在讨论的iframe或显示它 使用其默认高度

现在，此脚本与 原始的，你可以加载 将其他文档*放入IFRAME中 即使页面已加载，并且 IFRAME将动态调整其 适合新文档的高度。所以使用 如果您不仅需要 通过显示外部内容 IFRAME标记，但打算更改此 页面加载后的内容

---

这里有一个更新版本的脚本：这在Chrome或Safari中似乎不起作用-随着内容的增长，这很好，但如果内容缩小，则主体的高度不会改变。因此IFrame只会变得更大，而不会更小。