获取跨域 iFrame 内部文档的高度答案

【问题标题】：Getting the height of a document that is inside of a Cross Domain iFrame获取跨域 iFrame 内部文档的高度
【发布时间】：2012-05-24 13:37:03
【问题描述】：

我发现并正在使用以下 stackoverflow 问题和答案 here。我正在使用 iFrame 内部的 iFrame 来引用父域，以便将我的身高传达给它。我完全理解这个概念，并且很容易实现。问题是，当我尝试从 jQuery 或仅通过 document.body.scrollHeight 获取 $(document).height() 时，当我的页面在 iFrame 中被引用时，我在所有浏览器中都看到了奇怪的结果。

这里是我的页面上发生的事情的一些背景。我正在做一些 ajax 调用来搜索第三方提供商的服务，并根据结果在我的页面内生成 html，这是非常标准的东西。顺便说一句，我正在等待将我的 html 添加到 DOM 中，然后再获取文档的高度。这是当我的页面在 iFrame 内时 $(document).height() 的结果。

FireFox 10.0.2，其中拾取的高度几乎比文档的实际高度小 1000 像素或更多。

Google Chrome 18.0.1025.162 大部分时间会选择正确的高度。有时高度只小了几百像素。

Safari 5 的行为与 FireFox 一样。

我看过很多博客文章，其中包含显示该行为的代码。我是否使用 jQuery 或 javascript 文档对象对我可用的东西都没有关系。我总是看到来自这些电话中的任何一个的结果不一致。我必须相信其他使用过这种技术的人也遇到过这种情况。

我不需要显示我的 iFrame 调整大小或辅助 iFrame 的代码，因为它们按预期运行。我想展示的主要代码是在 ajax 事件和 dom 操作完成后如何从搜索表单开始调整大小的过程：

function resizeMe() {
    var iFrameHelper = $("#iFrameHelper");
    iFrameHelper.attr("src", iFrameHelper.attr("data-url") + "?height=" + $(document).height() + "&cacheb=" + Math.random());
}

【问题讨论】：

标签： javascript jquery iframe cross-domain

【解决方案1】：

所以我最终弄清楚了问题所在。 $(document).height() 部分工作正常。问题全在于时机。 ajax 调用完成后我在页面中呈现的项目包含导致请求从页面发出以获取图像的图像。图像上没有设置默认高度，因此在我更改页面内 iFrame 上的 src 属性之前没有正确计算高度，这会启动父级的调整大小。

我最终所做的只是为我的所有图像默认了一个高度，因为它们共享相同的尺寸。我责怪 iFrame 而不是我自己。 2 天因为这么简单的原因拔掉我的头发。

我希望这对将来的其他人有所帮助。

【讨论】：