我可以看到这个问题已经被问过好几次了，但是所提出的解决方案似乎都不适合我正在构建的网站，所以我正在重新打开该线程。我正在尝试根据 iframe 内容的高度调整其大小。包含 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.offsetHieght 和 body.scrollHeight 均为 0。但是，在脚本运行完成后，如果我检查 的 DOM HTML iframe 元素（使用 fire debug）我可以看到主体的 clientHeight 是 456，内部 div 的 clientHeight 是 742。这让我相信当 iframe.onload 被触发时这些值还没有设置。因此，根据上述线程之一，我将代码移至 iframe 源页面的 body.onload 事件处理程序中。这个解决方案也不起作用。

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

Thanks,

CJ

动态驱动器有这样的脚本，我认为这符合您的要求。

还有一个新版本 now.

2011年更新：

I would strongly建议使用 AJAX 而不是类似的东西，特别是考虑到动态调整大小的 iframe 只能在同一域中工作。

即便如此，它还是有点不确定，所以如果您绝对必须使用 AJAX 而不是标准页面加载，那么您真的，really应该使用类似的东西history.pushState（并且将标准页面加载作为不支持它的浏览器的后备）。有一个 jQuery 插件可以帮你处理这些事情，由 GitHubber 编写，名为pjax，他们使用only用于仓库导航。