2011更新：

Question

我可以看到这个问题已被多次询问，但是所提出的解决方案似乎都不适用于我正在构建的网站，所以我重新打开了这个帖子。我试图根据内容的高度来调整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，＆amp; body.scrollHeight为0.但是，在脚本运行完毕后，如果我检查HTML iframe元素的DOM（使用fire debug），我可以看到body的clientHeight是456而内部div的clientHeight是742.这导致我相信在iframe.onload被触发时尚未设置这些值。因此，根据上面的一个主题，我将代码移动到iframe源页面的body.onload事件处理程序中。这个解决方案也没有用。

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

谢谢，

CJ

Answer 1

DynamicDrive有such a script，我认为这就是你所要求的。

现在还有newer version。

2011更新：

我强烈建议在这样的事情上使用AJAX，特别是考虑到动态调整大小iframe只适用于同一个域。

即便如此，它有点不确定，所以如果你绝对必须使用AJAX而不是标准页面加载，你真的，真的应该使用像history.pushState这样的东西（并且标准页面加载为对不支持它的浏览器的回退）。有一个jQuery插件可以为你处理这些东西，由GitHubber编写，名为pjax，他们只使用进行repo导航。

Answer 2

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

另一个技巧，在settimeout为10毫秒后调用函数

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

另一方面，ifmBluePill是什么？是iframe吗？或者里面的div？为什么要引用div的“contentDocument”？

Answer 3

顺便说一下，即使iframe内容发生了变化，DynamicDrive也会改进其脚本以始终调整大小：http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

从他们的页面：

这是原版的第二版   iframe SSI脚本，喜欢的   原始脚本可以让您无缝地   在您的页面上显示外部内容   通过IFRAME。它通过这样做   动态调整IFRAME的大小   包含页面的高度   在其中，消除任何可能的   IFRAME滚动条出现时   整洁地展示整个外部   内容。把它想象成SSI（服务器   方包括）使用DHTML模拟！   这个脚本适用于IE5 +和   NS6 +，以及其他浏览器，支持   完全隐藏的选项   有问题的iframe或显示它   使用其默认高度。

现在，这个脚本不同于   原来你可以加载   其他文件*进入IFRAME   即使在页面加载后，也是如此   IFRAME将动态调整它   适合新文档的高度。所以使用   如果你不仅需要这个脚本   通过显示外部内容   IFRAME标记，但打算更改此标记   页面加载后的内容。

动态调整iframe的大小

3 个答案:

2011更新：