获取跨域 iFrame 内文档的高度

Getting the height of a document that is inside of a Cross Domain iFrame

本文关键字：文档 高度 iFrame 获取      更新时间：2023-09-26

我在这里找到并使用以下堆栈溢出问题和答案。 我在 iFrame 中使用 iFrame，该框架引用回父域，以便将我的身高传达回父域。 我完全理解这个概念，并且很容易实现。 问题是，当我尝试从jQuery获取$（document）.height（）时，或者只是通过document.body.scrollHeight，当我的页面在iFrame中被引用时，我在所有浏览器中都看到了奇怪的结果。

以下是我的页面上发生的事情的一些背景。 我正在进行一些 ajax 调用来搜索第三方提供商的服务，并根据结果在我的页面内生成 html，这是非常标准的东西。 顺便说一下，在抓取文档的高度之前，我正在等待我的 html 被添加到 DOM 中。 以下是 $（document）.height（） 的结果，当我的页面位于 iFrame 中时。

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

谷歌浏览器 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());
}

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

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

我希望这在未来对其他人有所帮助。

相关文章：